From 6ebae19984b2a5abeb3148fdc04e51c1c8e0cf2d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 12:38:52 +0100
Subject: [PATCH] feat(#90): add hamburger menu and mobile nav drawer below
 640px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nav links were completely hidden on mobile (sm:flex / hidden split).
Adds a 44×44px hamburger toggle, a fixed overlay panel with full-width
nav links (min-h-[44px] touch targets), backdrop-click and Escape to
close, and a $effect that auto-closes on route change.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/AppNav.svelte | 129 +++++++++++++++++++++++++++++-
 1 file changed, 128 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 49e6888e..6cda8155 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -1,11 +1,33 @@
 <script lang="ts">
 import { page } from '$app/state';
+import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 let { isAdmin = false }: { isAdmin?: boolean } = $props();
+
+let mobileNavOpen = $state(false);
+
+$effect(() => {
+	// Read pathname to establish the reactive dependency.
+	// Write via untrack so the effect doesn't re-run on its own write.
+	void page.url.pathname;
+	untrack(() => {
+		mobileNavOpen = false;
+	});
+});
+
+function closeMobileNav() {
+	mobileNavOpen = false;
+}
+
+function handleOverlayKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		mobileNavOpen = false;
+	}
+}
 </script>
 
-<div class="flex">
+<div class="flex items-center">
 	<div class="mr-10 flex flex-shrink-0 items-center">
 		<a href="/" class="flex items-center" aria-label="Familienarchiv">
 			<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
@@ -14,6 +36,7 @@ let { isAdmin = false }: { isAdmin?: boolean } = $props();
 		</a>
 	</div>
 
+	<!-- Desktop nav -->
 	<nav class="hidden items-center sm:flex sm:space-x-1">
 		<a
 			href="/"
@@ -56,4 +79,108 @@ let { isAdmin = false }: { isAdmin?: boolean } = $props();
 			</a>
 		{/if}
 	</nav>
+
+	<!-- Hamburger toggle (mobile only) -->
+	<button
+		class="ml-auto flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink sm:hidden"
+		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
+		aria-expanded={mobileNavOpen}
+		aria-controls="mobile-nav"
+		onclick={() => (mobileNavOpen = !mobileNavOpen)}
+	>
+		{#if mobileNavOpen}
+			<!-- X icon -->
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="22"
+				height="22"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<line x1="18" y1="6" x2="6" y2="18" />
+				<line x1="6" y1="6" x2="18" y2="18" />
+			</svg>
+		{:else}
+			<!-- Hamburger icon -->
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="22"
+				height="22"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<line x1="3" y1="6" x2="21" y2="6" />
+				<line x1="3" y1="12" x2="21" y2="12" />
+				<line x1="3" y1="18" x2="21" y2="18" />
+			</svg>
+		{/if}
+	</button>
 </div>
+
+<!-- Mobile nav overlay -->
+{#if mobileNavOpen}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="fixed inset-0 top-[68px] z-40 sm:hidden" onkeydown={handleOverlayKeydown}>
+		<!-- Backdrop -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="absolute inset-0 bg-black/20" onclick={closeMobileNav}></div>
+
+		<!-- Panel -->
+		<div class="relative border-b border-line bg-surface shadow-md">
+			<nav id="mobile-nav">
+				<a
+					href="/"
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+                           {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
+                            ? 'bg-nav-active text-ink'
+                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+				>
+					{m.nav_documents()}
+				</a>
+
+				<a
+					href="/persons"
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+                           {page.url.pathname.startsWith('/persons')
+                            ? 'bg-nav-active text-ink'
+                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+				>
+					{m.nav_persons()}
+				</a>
+
+				<a
+					href="/conversations"
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+                           {page.url.pathname.startsWith('/conversations')
+                            ? 'bg-nav-active text-ink'
+                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+				>
+					{m.nav_conversations()}
+				</a>
+
+				{#if isAdmin}
+					<a
+						href="/admin"
+						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+                               {page.url.pathname.startsWith('/admin')
+                                ? 'bg-nav-active text-ink'
+                                : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+					>
+						{m.nav_admin()}
+					</a>
+				{/if}
+			</nav>
+		</div>
+	</div>
+{/if}
-- 
2.49.1