site: implement global bar nav toggling

site/src/routes/+layout.svelte

@@ -4,15 +4,25 @@
 
   import favicon from "$lib/assets/favicon.svg";
   import type { NavLink } from "./docs";
+  import { onNavigate } from "$app/navigation";
 
   const { data, children } = $props();
+  let menuOpen = $state(false);
+  onNavigate(() => {
+    menuOpen = false;
+    console.log(menuOpen);
+  });
 </script>
 
 <svelte:head>
   <link rel="icon" href={favicon} />
 </svelte:head>
 
+<div class="global-bar">
+  <span class="logo">Logo</span>
   <nav>
+    <div class={["menu", menuOpen && "open"]}>
+      <button onclick={() => (menuOpen = !menuOpen)}>Menu</button>
       <ul>
         <li><a href="/">Home</a></li>
         <li><a href={config.blog.base}>Blog</a></li>
@@ -21,7 +31,9 @@
           {#if data.docs}{@render navLinks(data.docs.navLinks)}{/if}
         </li>
       </ul>
+    </div>
   </nav>
+</div>
 <main>
   {@render children?.()}
 </main>
@@ -50,28 +62,32 @@
 {/snippet}
 
 <style>
-  nav {
-    height: var(--globalNavHeight);
+  .global-bar {
+    height: var(--globalBarHeight);
     display: flex;
+    justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid;
     padding: 0 var(--pagePadding);
   }
+  .menu > ul {
+    visibility: hidden;
+    position: fixed;
+    left: 0;
+    top: var(--globalBarHeight);
+    width: 100vw;
+    height: 100vh;
+    background: #fff;
+  }
+  .menu.open > ul {
+    visibility: visible;
+  }
   ul {
-    display: flex;
     list-style: none;
     padding: 0;
     margin: 0;
-
-    ul {
-      display: none;
-    }
   }
   li {
-    padding-left: 2em;
-
-    &:first-child {
-      padding-left: 0;
-    }
+    padding-left: 1em;
   }
 </style>

site/src/routes/+layout.ts

@@ -9,6 +9,9 @@ export async function load({ url }) {
     ? url.pathname.slice(0, -1)
     : url.pathname;
   return {
-    docs: path != config.docs.base ? null : await new Docs().init(),
+    docs:
+      path != config.docs.base && !path.startsWith(`${config.docs.base}/`)
+        ? null
+        : await new Docs().init(),
   };
 }

site/src/routes/blog/+page.svelte

@@ -0,0 +1 @@
+<h1>Blog</h1>

site/src/routes/docs/+layout.svelte

@@ -42,12 +42,6 @@
   }
   nav {
     display: none;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    background: #fff;
   }
 
   summary {

site/src/routes/index.css

@@ -17,5 +17,5 @@ body {
 
 :root {
   --pagePadding: 15px;
-  --globalNavHeight: 60px;
+  --globalBarHeight: 60px;
 }