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: {