summaryrefslogtreecommitdiff
path: root/ui/routes/+layout.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'ui/routes/+layout.svelte')
-rw-r--r--ui/routes/+layout.svelte54
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?.()}