diff options
Diffstat (limited to 'ui/routes/+layout.svelte')
| -rw-r--r-- | ui/routes/+layout.svelte | 54 |
1 files changed, 24 insertions, 30 deletions
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index d786389..094cacb 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -1,49 +1,43 @@ <script> + import { setContext } from 'svelte'; import { onNavigate } from '$app/navigation'; import '../app.css'; import logo from '$lib/assets/logo.png'; import { AppBar } from '@skeletonlabs/skeleton'; - import { showMenu, currentUser } from '$lib/store'; + import { currentUser } from '$lib/store'; import CurrentUser from '$lib/components/CurrentUser.svelte'; + let pageContext = $state({ + showMenu: false + }); + setContext('page', pageContext); + function toggleMenu(event) { event.preventDefault(); - showMenu.update((value) => !value); + pageContext.showMenu = !pageContext.showMenu; } onNavigate(() => { - showMenu.update(() => false); + pageContext.showMenu = false; }); let { children } = $props(); </script> -<div id="app" class="m-0 p-0 h-vh w-full"> - <div class="w-full"> - <AppBar class="app-bar"> - <svelte:fragment slot="lead"> - <button onclick={toggleMenu} class="cursor-pointer"> - <img class="w-8 h-8" alt="logo" src={logo} /> - </button> - </svelte:fragment> - <a href="/">understory</a> - <svelte:fragment slot="trail"> - {#if $currentUser} - <CurrentUser /> - {/if} - </svelte:fragment> - </AppBar> - </div> - - {@render children?.()} -</div> - -<style> - #app { - margin: 0; - height: 100vh; - width: 100%; - } -</style> +<AppBar class="app-bar"> + <svelte:fragment slot="lead"> + <button onclick={toggleMenu} class="cursor-pointer"> + <img class="w-8 h-8" alt="logo" src={logo} /> + </button> + </svelte:fragment> + <a href="/">understory</a> + <svelte:fragment slot="trail"> + {#if $currentUser} + <CurrentUser /> + {/if} + </svelte:fragment> +</AppBar> + +{@render children?.()} |
