Start adding UI

packages/example-site/app.scss

@@ -0,0 +1,38 @@
+body {
+  margin: 0;
+}
+
+.ex-app {
+  display: flex;
+  width: 100vw;
+  min-height: 100vh;
+  justify-content: space-between;
+  align-items: stretch;
+
+  --nav-width: 60px;
+  --nav-expanded-width: 320px;
+
+  &--admin-nav {
+    z-index: 100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+
+  &--page {
+    flex-basis: 100%;
+  }
+
+  @media screen and (min-width: 1000px) {
+    --nav-width: var(--nav-expanded-width);
+
+    &--admin-nav {
+      position: unset;
+      width: unset;
+      flex-basis: var(--nav-width);
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+}

packages/example-site/app.tsx

@@ -1,10 +1,18 @@
 import { defineComponent } from 'vue';
 import { NuxtPage } from '#components';
 
+import './app.scss';
+
+const AdminNav = defineAsyncComponent(() => import('~~/components/admin/Nav'));
+
 export default defineComponent({
   setup() {
+    const { me } = useMe();
     return () => (
-      <NuxtPage />
+      <div class="ex-app">
+        {me.value ? <AdminNav class="ex-app--admin-nav" /> : null}
+        <NuxtPage class="ex-app--page" />
+      </div>
     );
   },
 });

packages/example-site/components/PageToolbar.tsx

@@ -1,10 +1,8 @@
 import { defineComponent } from 'vue';
-import { SbMode } from '@schlechtenburg/core';
+import { SbButton, SbMode } from '@schlechtenburg/core';
 
 export default defineComponent({
   async setup() {
-    const { me } = useMe();
-
     const { page } = usePage();
 
     const {
@@ -17,19 +15,19 @@ export default defineComponent({
     return () => (
       <div class="ex-page-toolbar">
         { mode.value === SbMode.View
-          ? <button
+          ? <SbButton
             type="button"
             onClick={() => edit(page.value?.attributes?.block!)}
-          >Edit</button>
+          >Edit</SbButton>
           : <>
-            <button
+            <SbButton
               type="button"
               onClick={() => cancel()}
-            >Cancel</button>
+            >Cancel</SbButton>
-            <button
+            <SbButton
               type="button"
               onClick={() => save()}
-            >Save</button>
+            >Save</SbButton>
           </>}
       </div>
     );

packages/example-site/components/admin/MainMenu.scss

@@ -0,0 +1,3 @@
+.ex-main-menu {
+
+}

packages/example-site/components/admin/Nav.scss

@@ -0,0 +1,12 @@
+.ex-admin-nav {
+  background-color: white;
+  width: var(--nav-width);
+
+  &_expanded {
+    width: 80vw;
+    max-width: 300px;
+  }
+
+  @media screen and (min-width: 1000px) {
+  }
+}

packages/example-site/components/admin/Nav.tsx

@@ -0,0 +1,35 @@
+import { defineComponent } from 'vue';
+import { NuxtLink } from '~~/.nuxt/components';
+
+import './Nav.scss';
+
+export default defineComponent({
+  setup() {
+    const expanded = useState(() => false);
+    const toggle = () => {
+      expanded.value != expanded.value;
+    };
+
+    const classes = computed(() => ({
+      'ex-admin-nav': true,
+      'ex-admin-nav_expanded': expanded.value,
+    }));
+
+    return () => (
+      <nav
+        class={classes.value}
+      >
+        <button
+          class="ex-admin-nav--toggle"
+          type="button"
+          onClick={() => toggle()}
+        >Toggle</button>
+        <ul class="ex-admin-nav--menu">
+          <li class="ex-admin-nav--menu-item">
+            <NuxtLink to="/">Logout</NuxtLink>
+          </li>
+        </ul>
+      </nav>
+    );
+  },
+});

packages/example-site/nuxt.config.ts

@@ -1,7 +1,9 @@
 import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
-  modules: ['nuxt-graphql-client'],
+  modules: [
+    'nuxt-graphql-client',
+  ],
 
   runtimeConfig: {
     public: {