Make the website less ugly, especially on mobile

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

1 files changed, 33 insertions, 13 deletions

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 6ad0d22..519a11d 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -2,11 +2,19 @@
   import { useRegisterSW } from 'virtual:pwa-register/svelte';
   import { pwaInfo } from 'virtual:pwa-info';
   import { onMount } from 'svelte';
+  import {
+    AppShell,
+    AppBar,
+    getDrawerStore,
+    getToastStore,
+    initializeStores,
+    Toast,
+    Drawer
+  } from '@skeletonlabs/skeleton';
 
-  import '../app.postcss';
-  import { AppShell, AppBar, getToastStore, initializeStores, Toast } from '@skeletonlabs/skeleton';
   import Navigation from '$lib/svelte/Navigation.svelte';
 
+  import '../app.postcss';
   // Floating UI for Popups
   // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
   // import { storePopup } from '@skeletonlabs/skeleton';
@@ -14,8 +22,15 @@
 
   initializeStores();
 
+  const drawerStore = getDrawerStore();
   const toastStore = getToastStore();
 
+  function drawerOpen() {
+    drawerStore.open({
+      width: 'w-[80px]'
+    });
+  }
+
   onMount(async () => {
     if (pwaInfo) {
       useRegisterSW({
@@ -46,25 +61,30 @@
   {@html webManifestLink}
 </svelte:head>
 
+<Drawer>
+  <Navigation />
+</Drawer>
+
 <Toast position="br" />
 
 <!-- App Shell -->
-<AppShell>
+<AppShell slotSidebarLeft="w-0 lg:w-64">
   <svelte:fragment slot="header">
     <!-- App Bar -->
     <AppBar>
       <svelte:fragment slot="lead">
+        <div class="flex items-center">
+          <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+            <span>
+              <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
+                <rect width="100" height="20" />
+                <rect y="30" width="100" height="20" />
+                <rect y="60" width="100" height="20" />
+              </svg>
+            </span>
+          </button>
           <strong class="text-xl uppercase">A!</strong>
-      </svelte:fragment>
-      <svelte:fragment slot="trail">
-        <a
-          class="btn btn-sm variant-ghost-surface"
-          href="https://github.com/rosstheross/rosstheross.github.io"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Frontend Source
-        </a>
+        </div>
       </svelte:fragment>
     </AppBar>
   </svelte:fragment>