melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add responsive hamburger menu for mobile navigation

Browse Source
This commit is contained in:
mkelvers
2026-06-25 21:41:39 +02:00
parent b171df07f2
commit e9917730b8
1 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
templates/components/navigation.gohtml
View File

@@ -96,20 +96,44 @@
{{define "header_navigation"}} {{define "header_navigation"}}
{{$currentPath := .CurrentPath}} {{$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"> <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"> <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}}"> <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"> <img src="/static/assets/logo.png" alt="" class="h-10 w-auto shrink-0" aria-hidden="true">
</a> </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="/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="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="/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>
<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" "watchlist" "href" "/watchlist" "label" "Watchlist" "isActive" (eq $currentPath "/watchlist")}}
{{template "header_nav_link" dict "key" "search" "href" "/search" "label" "Search" "isActive" (eq $currentPath "/search")}} {{template "header_nav_link" dict "key" "search" "href" "/search" "label" "Search" "isActive" (eq $currentPath "/search")}}
</div> </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> </nav>
</header> </header>
{{end}} {{end}}