116 lines
7.2 KiB
Plaintext
116 lines
7.2 KiB
Plaintext
{{define "nav_icon_home"}}
|
|
<svg class="size-6 shrink-0 transition-colors duration-200 {{if .}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
{{end}}
|
|
|
|
{{define "nav_icon_browse"}}
|
|
<svg class="size-6 shrink-0 transition-colors duration-200 {{if .}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="0" ry="0" />
|
|
<line x1="7" y1="2" x2="7" y2="22" />
|
|
<line x1="17" y1="2" x2="17" y2="22" />
|
|
<line x1="2" y1="12" x2="22" y2="12" />
|
|
<line x1="2" y1="7" x2="7" y2="7" />
|
|
<line x1="2" y1="17" x2="7" y2="17" />
|
|
<line x1="17" y1="17" x2="22" y2="17" />
|
|
<line x1="17" y1="7" x2="22" y2="7" />
|
|
</svg>
|
|
{{end}}
|
|
|
|
{{define "nav_icon_watchlist"}}
|
|
<svg class="size-6 shrink-0 transition-colors duration-200 {{if .}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M17 18.113l-3.256-2.326A2.989 2.989 0 0 0 12 15.228c-.629 0-1.232.194-1.744.559L7 18.113V4h10v14.113zM18 2H6a1 1 0 0 0-1 1v17.056c0 .209.065.412.187.581a.994.994 0 0 0 1.394.233l4.838-3.455a1 1 0 0 1 1.162 0l4.838 3.455A1 1 0 0 0 19 20.056V3a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
{{end}}
|
|
|
|
{{define "nav_item"}}
|
|
{{$isActive := .isActive}}
|
|
{{$isCollapsed := .isCollapsed}}
|
|
<a href="{{.href}}" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="{{.label}}"{{end}} aria-current="{{if $isActive}}page{{end}}">
|
|
{{if $isActive}}
|
|
<div class="bg-accent absolute top-1/2 left-0 h-12 w-0.5 -translate-y-1/2 rounded-r-sm"></div>
|
|
{{end}}
|
|
{{if eq .key "home"}}{{template "nav_icon_home" $isActive}}
|
|
{{else if eq .key "browse"}}{{template "nav_icon_browse" $isActive}}
|
|
{{else if eq .key "watchlist"}}{{template "nav_icon_watchlist" $isActive}}
|
|
{{end}}
|
|
<div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
|
|
<div class="overflow-hidden min-w-0">
|
|
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">{{.label}}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{{end}}
|
|
|
|
{{define "navigation"}}
|
|
{{$currentPath := .CurrentPath}}
|
|
{{$isCollapsed := .IsCollapsed}}
|
|
{{$navItems := list
|
|
(dict "key" "home" "href" "/" "label" "Home" "isActive" (eq $currentPath "/"))
|
|
(dict "key" "watchlist" "href" "/watchlist" "label" "Watchlist" "isActive" (eq $currentPath "/watchlist"))
|
|
}}
|
|
|
|
<nav class="bg-background-sidebar h-full">
|
|
<div class="flex h-full flex-col justify-between">
|
|
<div class="flex flex-col">
|
|
<a href="/search" class="group relative flex w-full items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Search"{{end}} aria-current="{{if eq $currentPath "/search"}}page{{end}}">
|
|
{{if eq $currentPath "/search"}}
|
|
<div class="bg-accent absolute top-1/2 left-0 h-12 w-0.5 -translate-y-1/2 rounded-r-sm"></div>
|
|
{{end}}
|
|
<svg class="size-6 shrink-0 transition-colors duration-200 {{if eq $currentPath "/search"}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" 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>
|
|
<div class="nav-label-container ml-4 grid min-w-0 flex-1 grid-cols-[1fr] opacity-100">
|
|
<div class="flex min-w-0 items-center justify-between gap-3 overflow-hidden">
|
|
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if eq $currentPath "/search"}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Search</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
{{range $navItems}}
|
|
{{template "nav_item" dict "key" .key "href" .href "label" .label "isActive" .isActive "isCollapsed" $isCollapsed}}
|
|
{{end}}
|
|
</div>
|
|
|
|
</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-[light-dark(#ececec,#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-[light-dark(var(--color-foreground),#ffffff)] 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-[light-dark(var(--color-foreground),#ffffff)] 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">
|
|
<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>
|
|
</div>
|
|
|
|
<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}}
|