From e9917730b8ef083aaebad7f13e830e414377864e Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Thu, 25 Jun 2026 21:41:39 +0200
Subject: [PATCH] feat: add responsive hamburger menu for mobile navigation

---
 templates/components/navigation.gohtml | 32 ++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/templates/components/navigation.gohtml b/templates/components/navigation.gohtml
index 661fa710..6d62bfd2 100644
--- a/templates/components/navigation.gohtml
+++ b/templates/components/navigation.gohtml
@@ -96,20 +96,44 @@
 
 {{define "header_navigation"}}
 {{$currentPath := .CurrentPath}}
-<header class="fixed inset-x-0 top-0 z-50 h-16 border-b border-border-light bg-background-sidebar">
+<header class="fixed inset-x-0 top-0 z-100 h-16 border-b border-border-light bg-background-sidebar">
   <nav class="flex h-full items-center justify-between pl-4 md:pl-8" aria-label="Primary navigation">
     <div class="flex h-full items-center gap-4">
       <a href="/" class="inline-flex size-12 items-center justify-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted" title="Home" aria-label="Home" aria-current="{{if eq $currentPath "/"}}page{{end}}">
         <img src="/static/assets/logo.png" alt="" class="h-10 w-auto shrink-0" aria-hidden="true">
       </a>
-      <a href="/browse" class="inline-flex h-full items-center px-2 text-base transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted sm:px-3 {{if eq $currentPath "/browse"}}text-foreground{{else}}text-foreground-muted{{end}}" aria-current="{{if eq $currentPath "/browse"}}page{{end}}">Browse</a>
-      <a href="/top-picks" class="inline-flex h-full items-center px-2 text-base transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted sm:px-3 {{if eq $currentPath "/top-picks"}}text-foreground{{else}}text-foreground-muted{{end}}" aria-current="{{if eq $currentPath "/top-picks"}}page{{end}}">Top Picks</a>
+      <a href="/browse" class="hidden h-full items-center px-2 text-base transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted sm:inline-flex sm:px-3 {{if eq $currentPath "/browse"}}text-foreground{{else}}text-foreground-muted{{end}}" aria-current="{{if eq $currentPath "/browse"}}page{{end}}">Browse</a>
+      <a href="/top-picks" class="hidden h-full items-center px-2 text-base transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted sm:inline-flex sm:px-3 {{if eq $currentPath "/top-picks"}}text-foreground{{else}}text-foreground-muted{{end}}" aria-current="{{if eq $currentPath "/top-picks"}}page{{end}}">Top Picks</a>
     </div>
 
-    <div class="flex h-full items-center">
+    <div class="hidden h-full items-center sm:flex">
       {{template "header_nav_link" dict "key" "watchlist" "href" "/watchlist" "label" "Watchlist" "isActive" (eq $currentPath "/watchlist")}}
       {{template "header_nav_link" dict "key" "search" "href" "/search" "label" "Search" "isActive" (eq $currentPath "/search")}}
     </div>
+
+    <details class="group relative flex h-full items-center sm:hidden">
+      <summary class="flex h-full cursor-pointer list-none items-center justify-center px-4 text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted [&::-webkit-details-marker]:hidden">
+        <span class="sr-only">Open navigation menu</span>
+        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <path d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </summary>
+
+      <div class="fixed inset-x-0 top-16 z-[90] border-y border-border-light bg-background-sidebar shadow-card">
+        <a href="/browse" class="flex items-center justify-between px-5 py-3 text-sm transition-colors hover:bg-surface-hover {{if eq $currentPath "/browse"}}text-foreground{{else}}text-foreground-muted hover:text-foreground{{end}}" aria-current="{{if eq $currentPath "/browse"}}page{{end}}">
+          <span>Browse</span>
+        </a>
+        <a href="/top-picks" class="flex items-center justify-between px-5 py-3 text-sm transition-colors hover:bg-surface-hover {{if eq $currentPath "/top-picks"}}text-foreground{{else}}text-foreground-muted hover:text-foreground{{end}}" aria-current="{{if eq $currentPath "/top-picks"}}page{{end}}">
+          <span>Top Picks</span>
+        </a>
+        <a href="/watchlist" class="flex items-center justify-between px-5 py-3 text-sm transition-colors hover:bg-surface-hover {{if eq $currentPath "/watchlist"}}text-foreground{{else}}text-foreground-muted hover:text-foreground{{end}}" aria-current="{{if eq $currentPath "/watchlist"}}page{{end}}">
+          <span>Watchlist</span>
+        </a>
+        <a href="/search" class="flex items-center justify-between px-5 py-3 text-sm transition-colors hover:bg-surface-hover {{if eq $currentPath "/search"}}text-foreground{{else}}text-foreground-muted hover:text-foreground{{end}}" aria-current="{{if eq $currentPath "/search"}}page{{end}}">
+          <span>Search</span>
+        </a>
+      </div>
+    </details>
   </nav>
 </header>
 {{end}}