From 27b7e3afec12789b259758626404b4a178a89717 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu> Date: Wed, 28 Dec 2022 20:59:58 +0100 Subject: [PATCH] Start adding UI --- packages/example-site/app.scss | 38 +++++++++++++++++++ packages/example-site/app.tsx | 10 ++++- .../example-site/components/PageToolbar.tsx | 16 ++++---- .../components/admin/MainMenu.scss | 3 ++ .../example-site/components/admin/Nav.scss | 12 ++++++ .../example-site/components/admin/Nav.tsx | 35 +++++++++++++++++ packages/example-site/nuxt.config.ts | 4 +- 7 files changed, 107 insertions(+), 11 deletions(-) create mode 100644 packages/example-site/app.scss create mode 100644 packages/example-site/components/admin/MainMenu.scss create mode 100644 packages/example-site/components/admin/Nav.scss create mode 100644 packages/example-site/components/admin/Nav.tsx diff --git a/packages/example-site/app.scss b/packages/example-site/app.scss new file mode 100644 index 0000000..3c06555 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/example-site/app.tsx b/packages/example-site/app.tsx index c5a28cb..f3d5ca5 100644 --- a/packages/example-site/app.tsx +++ b/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> ); }, }); diff --git a/packages/example-site/components/PageToolbar.tsx b/packages/example-site/components/PageToolbar.tsx index da36cef..edfd0b3 100644 --- a/packages/example-site/components/PageToolbar.tsx +++ b/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> - <button + >Cancel</SbButton> + <SbButton type="button" onClick={() => save()} - >Save</button> + >Save</SbButton> </>} </div> ); diff --git a/packages/example-site/components/admin/MainMenu.scss b/packages/example-site/components/admin/MainMenu.scss new file mode 100644 index 0000000..52ead18 --- /dev/null +++ b/packages/example-site/components/admin/MainMenu.scss @@ -0,0 +1,3 @@ +.ex-main-menu { + +} diff --git a/packages/example-site/components/admin/Nav.scss b/packages/example-site/components/admin/Nav.scss new file mode 100644 index 0000000..99fca65 --- /dev/null +++ b/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) { + } +} diff --git a/packages/example-site/components/admin/Nav.tsx b/packages/example-site/components/admin/Nav.tsx new file mode 100644 index 0000000..9e76001 --- /dev/null +++ b/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> + ); + }, +}); diff --git a/packages/example-site/nuxt.config.ts b/packages/example-site/nuxt.config.ts index b8dc4c6..3e7d927 100644 --- a/packages/example-site/nuxt.config.ts +++ b/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: {