From 849f7a6210d70ffbc16600141b32ae6297f230c9 Mon Sep 17 00:00:00 2001
From: kallelongjuhani <kalle.jarvenpaa@gmail.com>
Date: Thu, 29 Jan 2026 09:57:27 +0200
Subject: [PATCH] feat[docs]: mobile navigation

Add full mobile navigation for `docs`.

Remove `fixed` from `Header`.
---
 docs/src/lib/components/Header.svelte         | 25 +++----
 docs/src/lib/components/Navigation.svelte     | 72 +++++++------------
 docs/src/lib/components/NavigationItem.svelte | 48 +++++++++++++
 .../src/lib/components/TableOfContents.svelte |  3 +-
 docs/src/lib/consts.ts                        |  2 +
 docs/src/lib/layouts/MdLayout.svelte          |  2 +-
 docs/src/routes/(content)/+layout.svelte      |  4 +-
 docs/src/routes/+layout.svelte                | 31 ++++++--
 8 files changed, 112 insertions(+), 75 deletions(-)
 create mode 100644 docs/src/lib/components/NavigationItem.svelte

diff --git a/docs/src/lib/components/Header.svelte b/docs/src/lib/components/Header.svelte
index c5a0972e4..e30945a35 100644
--- a/docs/src/lib/components/Header.svelte
+++ b/docs/src/lib/components/Header.svelte
@@ -5,13 +5,14 @@
   import { getFirstChild } from '$lib/utils/navigation';
   import GithubIcon from '$lib/components/GithubIcon.svelte';
   import { OpenVAALogo } from '$lib/components/openVAALogo';
+  import { DRAWER_ID } from '../consts';
 
   function isActiveSection(section: NavigationSection): boolean {
     return page.url.pathname.startsWith(section.route);
   }
 </script>
 
-<header class="fixed top-0 right-0 left-0 z-50 h-(--spacing-headerHeight) max-h-(--spacing-headerHeight) bg-base-300">
+<header class="h-(--spacing-headerHeight) max-h-(--spacing-headerHeight) bg-base-300">
   <div class="navbar px-lg">
     <div class="navbar-start">
       <a href="/">
@@ -35,24 +36,16 @@
     </div>
     <div class="navbar-end hidden justify-end md:flex"><GithubIcon /></div>
 
-    <!-- Mobile menu button -->
-    <div class="navbar-end md:hidden">
-      <details class="dropdown dropdown-end">
-        <summary class="btn btn-circle btn-ghost" aria-label="Open menu">
+    <!-- Mobile menu -->
+    <div class="navbar-end gap-md md:hidden">
+      <GithubIcon />
+      <div class="flex-none lg:hidden">
+        <label for={DRAWER_ID} aria-label="open sidebar" class="btn btn-circle btn-ghost">
           <svg class="h-24 w-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
           </svg>
-        </summary>
-        <ul
-          class="dropdown-content menu mt-md flex w-max max-w-[80vw] flex-col gap-md rounded-md bg-base-100 p-2 py-lg text-lg shadow-lg">
-          {#each navigation as section}
-            {@const isActive = isActiveSection(section)}
-            {@const firstChild = getFirstChild(section)}
-            <li><a href={firstChild} class="flex justify-end">{section.title}</a></li>
-          {/each}
-          <li class="flex justify-end"><GithubIcon /></li>
-        </ul>
-      </details>
+        </label>
+      </div>
     </div>
   </div>
 </header>
diff --git a/docs/src/lib/components/Navigation.svelte b/docs/src/lib/components/Navigation.svelte
index 6c5ffe8ef..00f09a3a1 100644
--- a/docs/src/lib/components/Navigation.svelte
+++ b/docs/src/lib/components/Navigation.svelte
@@ -1,56 +1,34 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import { findActiveSection, hasChildren, isActive } from '../utils/navigation';
+  import { page } from '$app/state';
+  import { findActiveSection } from '../utils/navigation';
+  import { navigation } from '../navigation.config';
+  import NavigationItem from './NavigationItem.svelte';
 
-  $: activeSection = findActiveSection($page.url);
+  type Props = {
+    full?: boolean;
+    onLinkClick?: () => unknown;
+    class?: string;
+  };
+
+  const { full = false, onLinkClick = () => void 0, class: className = '' }: Props = $props();
+
+  const url = $derived(page.url);
+  const activeSection = $derived(findActiveSection(url));
 </script>
 
-{#if activeSection}
-  <nav
-    class="flex max-w-[20rem] min-w-[20rem] flex-col gap-md overflow-y-auto border-r border-base-300 bg-base-100 p-lg">
+<nav class="flex flex-col gap-md overflow-y-auto {className}">
+  {#if full && navigation.length > 0}
+    <ul class="menu-compact menu m-0 -ms-12 p-0">
+      {#each navigation as section}
+        <NavigationItem item={section} {url} {onLinkClick} />
+      {/each}
+    </ul>
+  {:else if !full && activeSection}
     <h3 class="font-bold">{activeSection.title}</h3>
-
     <ul class="menu-compact menu m-0 -ms-12 p-0">
       {#each activeSection.children as item}
-        {#if hasChildren(item)}
-          {@const itemActive =
-            isActive(item.route, $page.url) || item.children.some((child) => isActive(child.route, $page.url))}
-          <li>
-            <details open={itemActive}>
-              <summary>
-                {item.title}
-              </summary>
-              <ul>
-                {#each item.children as child}
-                  {@const childActive = isActive(child.route, $page.url)}
-                  <li>
-                    <a href={child.route} class:menu-active={childActive}>
-                      {child.title}
-                    </a>
-                  </li>
-                {/each}
-              </ul>
-            </details>
-          </li>
-        {:else}
-          {@const itemActive = isActive(item.route, $page.url)}
-          <li>
-            <a href={item.route} class:menu-active={itemActive} class:secondary={item.isSecondary}>
-              {item.title}
-            </a>
-          </li>
-        {/if}
+        <NavigationItem {item} {url} {onLinkClick} />
       {/each}
     </ul>
-  </nav>
-{/if}
-
-<style>
-  .menu-active {
-    background-color: var(--color-base-300);
-    color: var(--color-neutral);
-  }
-  details > summary {
-    cursor: pointer;
-  }
-</style>
+  {/if}
+</nav>
diff --git a/docs/src/lib/components/NavigationItem.svelte b/docs/src/lib/components/NavigationItem.svelte
new file mode 100644
index 000000000..911b86f43
--- /dev/null
+++ b/docs/src/lib/components/NavigationItem.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { hasChildren, isActive } from '../utils/navigation';
+  import type { NavigationItem as NavigationItemType, NavigationSection } from '$lib/navigation.type';
+  import Self from './NavigationItem.svelte';
+
+  interface Props {
+    item: NavigationItemType | NavigationSection;
+    url: URL;
+    onLinkClick?: () => unknown;
+  }
+
+  const { item, url, onLinkClick = () => void 0 }: Props = $props();
+
+  const itemActive = $derived(
+    isActive(item.route, url) || (hasChildren(item) && item.children.some((child) => isActive(child.route, url)))
+  );
+</script>
+
+{#if hasChildren(item)}
+  <li>
+    <details open={itemActive}>
+      <summary>
+        {item.title}
+      </summary>
+      <ul>
+        {#each item.children as child}
+          <Self item={child} {url} {onLinkClick} />
+        {/each}
+      </ul>
+    </details>
+  </li>
+{:else}
+  <li>
+    <a href={item.route} class:menu-active={itemActive} class:secondary={item.isSecondary} onclick={onLinkClick}>
+      {item.title}
+    </a>
+  </li>
+{/if}
+
+<style>
+  .menu-active {
+    background-color: var(--color-base-300);
+    color: var(--color-neutral);
+  }
+  details > summary {
+    cursor: pointer;
+  }
+</style>
diff --git a/docs/src/lib/components/TableOfContents.svelte b/docs/src/lib/components/TableOfContents.svelte
index 4ac9f8a31..f56e09382 100644
--- a/docs/src/lib/components/TableOfContents.svelte
+++ b/docs/src/lib/components/TableOfContents.svelte
@@ -74,7 +74,7 @@
 </script>
 
 {#if filteredHeadings.length > 0}
-  <nav class="toc" aria-label="Table of contents">
+  <nav class="toc top-xl" aria-label="Table of contents">
     <h2 class="toc-title">On this page</h2>
     <ul class="toc-list">
       {#each filteredHeadings as heading (heading.id)}
@@ -95,7 +95,6 @@
 <style>
   .toc {
     position: sticky;
-    top: 8rem;
     max-height: calc(100vh - 8rem);
     overflow-y: auto;
     border-left: 2px solid var(--color-base-300);
diff --git a/docs/src/lib/consts.ts b/docs/src/lib/consts.ts
index 11d135fbd..f75a53506 100644
--- a/docs/src/lib/consts.ts
+++ b/docs/src/lib/consts.ts
@@ -1 +1,3 @@
 export const OPENVAA_REPO_URL = 'https://github.com/OpenVAA/voting-advice-application';
+
+export const DRAWER_ID = 'main-nav-drawer';
diff --git a/docs/src/lib/layouts/MdLayout.svelte b/docs/src/lib/layouts/MdLayout.svelte
index b1d3d1ccd..82dfce337 100644
--- a/docs/src/lib/layouts/MdLayout.svelte
+++ b/docs/src/lib/layouts/MdLayout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import TableOfContents from '$lib/components/TableOfContents.svelte';
   import type { Snippet } from 'svelte';
   import PeerNavigation from '$lib/components/PeerNavigation.svelte';
+  import TableOfContents from '$lib/components/TableOfContents.svelte';
   import './prism-vs.css';
 
   interface Props {
diff --git a/docs/src/routes/(content)/+layout.svelte b/docs/src/routes/(content)/+layout.svelte
index 63463aa82..46046b1fe 100644
--- a/docs/src/routes/(content)/+layout.svelte
+++ b/docs/src/routes/(content)/+layout.svelte
@@ -6,10 +6,10 @@
 
 <div class="flex min-h-[calc(100vh-var(--spacing-headerHeight))] w-full max-w-full grid-cols-[20rem_1fr_20rem] md:grid">
   <div class="row-span-full hidden md:grid">
-    <Navigation />
+    <Navigation class="max-w-[20rem] min-w-[20rem] border-r border-base-300 bg-base-100 p-lg" />
   </div>
 
-  <main class="col-span-full col-start-2 prose grid-cols-subgrid md:grid">
+  <main class="col-span-full col-start-2 prose max-w-screen grid-cols-subgrid md:grid">
     {@render children()}
   </main>
 </div>
diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
index 783df8a53..fcd4355d3 100644
--- a/docs/src/routes/+layout.svelte
+++ b/docs/src/routes/+layout.svelte
@@ -2,16 +2,33 @@
   import './layout.css';
   import Header from '$lib/components/Header.svelte';
   import Footer from '$lib/components/Footer.svelte';
+  import { DRAWER_ID } from '$lib/consts';
+  import Navigation from '$lib/components/Navigation.svelte';
 
-  let { children } = $props();
+  const { children } = $props();
+  let checked = $state(false);
 </script>
 
 <svelte:head><link rel="icon" href="/favicon.png" /></svelte:head>
 
-<Header />
-
-<div class="mt-headerHeight">
-  {@render children()}
+<div class="drawer drawer-end">
+  <input id={DRAWER_ID} type="checkbox" class="drawer-toggle" bind:checked />
+  <div class="drawer-content">
+    <Header />
+    <div>
+      {@render children()}
+      <Footer />
+    </div>
+  </div>
+  <div class="drawer-side">
+    <label for={DRAWER_ID} aria-label="Close menu" class="drawer-overlay"></label>
+    <div class="menu min-h-screen w-[80dvw] bg-base-200 p-lg">
+      <button aria-label="Close menu" class="mb-md cursor-pointer self-end" onclick={() => (checked = false)}>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+      <Navigation full onLinkClick={() => (checked = false)} />
+    </div>
+  </div>
 </div>
-
-<Footer />