Move `showMenu` out of globals and into page state.

I generally don't love globals, and the scope of this global is pretty narrow. Let's use the context hierarchy for this, instead.

(Kit mentioned that it might be possible to use CSS variables for this.)

3 files changed, 13 insertions, 7 deletions

diff --git a/ui/lib/store.js b/ui/lib/store.js
index bdd3e3b..ae17ffa 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -3,7 +3,6 @@ import { Channels } from '$lib/store/channels';
 import { Messages } from '$lib/store/messages';
 import { Logins } from '$lib/store/logins';
 
-export const showMenu = writable(false);
 export const currentUser = writable(null);
 export const logins = writable(new Logins());
 export const channelsList = writable(new Channels());
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..3c2849a 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,20 +1,26 @@
 <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();