Do a big mobile app design thing

Mobile-friendly anyway. Thanks to
[Miriam](https://www.miriamsuzanne.com/) for the CSS that enables a
sliding menu on mobile size, constant menu on larger.

1 files changed, 26 insertions, 15 deletions

diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 7b99d62..1b2391c 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,29 +1,40 @@
 <script>
-  import { AppBar } from '@skeletonlabs/skeleton';
-  import "../app.css";
+    import { AppBar } from '@skeletonlabs/skeleton';
+    import "../app.css";
 
-  import { currentUser } from '$lib/store';
-  import LogOut from '$lib/components/LogOut.svelte';
+    import logo from '$lib/assets/logo.png';
+
+    import { showMenu, currentUser } from '$lib/store';
+    import LogOut from '$lib/components/LogOut.svelte';
+
+    function toggleMenu() {
+        showMenu.update((value) => !value);
+    }
 </script>
 
-<div id="app">
-    <AppBar>
-        <svelte:fragment slot="lead">🌳</svelte:fragment>
+<div id="app" class="m-0 p-0 h-vh w-full">
+    <div class="fixed w-full">
+        <AppBar>
+            <svelte:fragment slot="lead">
+                <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
+                <img class="w-8 h-8" alt="logo" src={logo} />
+                </a>
+            </svelte:fragment>
             <a href="/">understory</a>
-        <svelte:fragment slot="trail">
-            {#if $currentUser}
-                <LogOut />
-            {/if}
-        </svelte:fragment>
-    </AppBar>
-
+            <svelte:fragment slot="trail">
+                {#if $currentUser}
+                    <LogOut />
+                {/if}
+            </svelte:fragment>
+        </AppBar>
+    </div>
     <slot />
 </div>
 
 <style>
     #app {
         margin: 0;
-        padding: 1rem;
+        padding: 0;
         height: 100vh;
         width: 100%;
     }