From 27b7e3afec12789b259758626404b4a178a89717 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= 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 () => ( - +
+ {me.value ? : null} + +
); }, }); 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 () => (
{ mode.value === SbMode.View - ? + >Edit : <> - - + >Save }
); 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 () => ( + + ); + }, +}); 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: {