diff options
Diffstat (limited to 'ui/routes/+layout.svelte')
| -rw-r--r-- | ui/routes/+layout.svelte | 45 |
1 files changed, 30 insertions, 15 deletions
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index 711b8bd..4133ff3 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -1,21 +1,36 @@ <script> - import { AppBar } from '@skeletonlabs/skeleton'; - import "../app.css"; + import "../app.css"; + import logo from '$lib/assets/logo.png'; - import { currentUser } from '$lib/store'; - import CurrentUser from '$lib/components/CurrentUser.svelte'; + import { AppBar } from '@skeletonlabs/skeleton'; + import { showMenu, currentUser } from '$lib/store'; + + import CurrentUser from '$lib/components/CurrentUser.svelte'; + import Invite from '$lib/components/Invite.svelte'; + import LogOut from '$lib/components/LogOut.svelte'; + + function toggleMenu() { + showMenu.update((value) => !value); + } </script> -<div id="app"> - <AppBar> - <svelte:fragment slot="lead">🌳</svelte:fragment> - <a href="/">understory</a> - <svelte:fragment slot="trail"> - {#if $currentUser} - <CurrentUser /> - {/if} - </svelte:fragment> - </AppBar> +<div id="app" class="m-0 p-0 h-vh w-full"> + <div class="w-full"> + <AppBar class="app-bar"> + <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} + <Invite /> + <LogOut /> + {/if} + </svelte:fragment> + </AppBar> + </div> <slot /> </div> @@ -23,7 +38,7 @@ <style> #app { margin: 0; - padding: 1rem; + padding: 0; height: 100vh; width: 100%; } |