From df4cb434b27610732269f592cd71d68fd8c42aae Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 9 May 2026 20:17:35 -0400
Subject: [PATCH] feat(web): hamburger trigger + mobile drawer mount in Shell

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/lib/components/Shell.svelte | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/Shell.svelte b/web/src/lib/components/Shell.svelte
index 4e29359a..09d4f7f8 100644
--- a/web/src/lib/components/Shell.svelte
+++ b/web/src/lib/components/Shell.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
-  import { ChevronDown } from 'lucide-svelte';
+  import { ChevronDown, Menu } from 'lucide-svelte';
   import { user, logout } from '$lib/auth/store.svelte';
   import { player } from '$lib/player/store.svelte';
   import { appName } from '$lib/branding';
   import PlayerBar from './PlayerBar.svelte';
   import SearchInput from './SearchInput.svelte';
+  import MobileNavDrawer from './MobileNavDrawer.svelte';
+  import { toggleMobileNav } from '$lib/stores/mobileNav.svelte';
 
   let { children } = $props<{ children: import('svelte').Snippet }>();
 
@@ -58,21 +60,31 @@
 <svelte:window onclick={handleWindowClick} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />
 
 <div class="grid h-screen grid-cols-[auto_1fr] grid-rows-[auto_1fr_auto] bg-background text-text-primary">
-  <header class="col-span-2 flex items-center gap-4 border-b border-border bg-surface px-4 py-3">
-    <div class="font-semibold">{appName()}</div>
-    <div class="flex-1">
+  <header class="col-span-2 flex items-center gap-2 md:gap-4 border-b border-border bg-surface px-3 md:px-4 py-3">
+    <button
+      type="button"
+      aria-label="Open navigation"
+      onclick={toggleMobileNav}
+      class="md:hidden flex items-center justify-center min-h-[44px] min-w-[44px] -ml-1
+             rounded text-text-secondary hover:text-text-primary
+             focus-visible:ring-2 focus-visible:ring-accent"
+    >
+      <Menu size={22} strokeWidth={1.5} />
+    </button>
+    <div class="font-semibold text-sm md:text-base">{appName()}</div>
+    <div class="flex-1 min-w-0">
       <SearchInput />
     </div>
     <div class="relative">
       <button
         bind:this={menuButtonRef}
         type="button"
-        class="flex items-center gap-1.5 rounded px-3 py-1 hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"
+        class="flex items-center gap-1.5 rounded px-2 md:px-3 py-1 hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent min-h-[44px]"
         aria-haspopup="menu"
         aria-expanded={menuOpen}
         onclick={() => (menuOpen = !menuOpen)}
       >
-        <span>{user.value?.username ?? ''}</span>
+        <span class="hidden sm:inline max-w-[8ch] truncate">{user.value?.username ?? ''}</span>
         <ChevronDown
           size={16}
           strokeWidth={1}
@@ -144,3 +156,5 @@
     </div>
   {/if}
 </div>
+
+<MobileNavDrawer />