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.)

1 files changed, 9 insertions, 3 deletions

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();