2 files changed, 28 insertions, 33 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index ae3dc6a..0a8c58d 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,16 +1,17 @@
 <script>
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy, getContext } from 'svelte';
 
   import { boot, subscribeToEvents } from '$lib/apiServer';
-  import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store';
+  import { currentUser, logins, channelsList, messages } from '$lib/store';
 
   import ChannelList from '$lib/components/ChannelList.svelte';
   import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
 
   let events = null;
 
+  let pageContext = getContext('page');
   let { children } = $props();
   let loading = $state(true);
   let channel = $derived($page.params.channel);
@@ -62,7 +63,7 @@
   <h2>Loading&hellip;</h2>
 {:else}
   <div id="interface" class="p-2">
-    <nav id="sidebar" data-expanded={$showMenu}>
+    <nav id="sidebar" data-expanded={pageContext.showMenu}>
       <div class="channel-list">
         <ChannelList active={channel} channels={$channelsList.channels} />
       </div>
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?.()}