diff options
Diffstat (limited to 'ui/routes/+layout.svelte')
| -rw-r--r-- | ui/routes/+layout.svelte | 41 |
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%; } |