diff options
Diffstat (limited to 'layouts/partials/header.html')
| -rw-r--r-- | layouts/partials/header.html | 81 |
1 files changed, 49 insertions, 32 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8ee657c..4ef817e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@ -<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b"> +<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b group/header"> <nav class="container mx-auto px-4 py-4 flex items-center justify-between"> <!-- Logo and Site Name --> {{ $homeLink := "/" }} @@ -18,37 +18,18 @@ {{ $isActive := eq $menuPath $currentPath }} {{ $isExternal := .Params.external }} {{ if .HasChildren }} - {{/* CSS-only hover/focus popup. No ARIA menu roles: we do not - implement arrow-key menu semantics, so claiming role="menu" - would lie to AT. focus-within gives keyboard reveal; the - parent stays a plain navigable link. */}} - <div class="relative group"> - <a - href="{{ .URL }}" - class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" - {{ if $isActive }}aria-current="page"{{ end }} - > - {{ i18n .Name }} - <i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i> - </a> - <!-- Submenu: padding-top bridges the hover gap --> - <div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 hidden group-hover:flex group-focus-within:flex"> - <ul class="frosted-bar border border-border rounded-lg px-4 py-3 flex flex-col gap-2 min-w-max shadow-lg"> - {{ range .Children }} - {{ $childExternal := .Params.external }} - <li> - <a - href="{{ .URL }}" - class="block text-sm whitespace-nowrap hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent" - {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }} - > - {{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }} - </a> - </li> - {{ end }} - </ul> - </div> - </div> + {{/* Parent link only here; its children render as a full-width + second row below the bar (see the submenu band after </nav>). + No ARIA menu roles: CSS-only hover/focus, not an arrow-key menu; + group-focus-within on the header gives keyboard reveal. */}} + <a + href="{{ .URL }}" + class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" + {{ if $isActive }}aria-current="page"{{ end }} + > + {{ i18n .Name }} + <i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i> + </a> {{ else }} <a href="{{ .URL }}" @@ -125,6 +106,42 @@ </div> </nav> + <!-- Desktop submenu: second row inside the same frosted glass, revealed on + hover/focus of the bar (no separate background — header expands) --> + {{ range .Site.Menus.main }} + {{ if .HasChildren }} + <div class="hidden md:group-hover/header:flex md:group-focus-within/header:flex"> + <ul class="container mx-auto px-4 py-3 flex items-center justify-center gap-8"> + {{ range .Children }} + {{ $childExternal := .Params.external }} + {{/* Curated entries (Packages) carry an i18n key as .Name; project + pages added via front-matter have no name, so fall back to the + page title. */}} + {{ $label := "" }} + {{ if $childExternal }} + {{ $label = .Name }} + {{ else if and .Name (i18n .Name) }} + {{ $label = i18n .Name }} + {{ else if .Page }} + {{ $label = .Page.LinkTitle }} + {{ else }} + {{ $label = .Name }} + {{ end }} + <li> + <a + href="{{ .URL }}" + class="text-sm whitespace-nowrap text-text-dim hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent" + {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }} + > + {{ $label }} + </a> + </li> + {{ end }} + </ul> + </div> + {{ end }} + {{ end }} + <!-- Mobile hamburger overlay menu --> {{ partial "hamburger-menu.html" . }} </header> |