feat: add header navigation bar templates

This commit is contained in:
2026-06-13 19:22:08 +02:00
parent f2213bd4aa
commit b1afd2ef82

View File

@@ -95,3 +95,35 @@
</div>
</nav>
{{end}}
{{define "header_nav_link"}}
{{$isActive := .isActive}}
<a href="{{.href}}" class="group inline-flex h-full w-14 items-center justify-center bg-transparent transition-colors hover:bg-[#101113] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-muted" title="{{.label}}" aria-label="{{.label}}" aria-current="{{if $isActive}}page{{end}}">
{{if eq .key "watchlist"}}
<svg class="size-6 shrink-0 text-foreground-muted/65 transition-all duration-200 group-hover:text-white group-hover:[stroke-width:2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
</svg>
{{else if eq .key "search"}}
<svg class="size-6 shrink-0 text-foreground-muted/65 transition-all duration-200 group-hover:text-white group-hover:[stroke-width:2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" />
</svg>
{{end}}
</a>
{{end}}
{{define "header_navigation"}}
{{$currentPath := .CurrentPath}}
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-background-sidebar">
<nav class="flex h-full items-center justify-between pl-4 md:pl-8" aria-label="Primary navigation">
<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>
<div class="flex h-full items-center">
{{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>
</nav>
</header>
{{end}}