diff options
| author | Danilo M. <danix@danix.xyz> | 2026-06-26 18:13:36 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-06-26 18:13:36 +0200 |
| commit | 9073908fb5e33c895b162d0418d6e67246af539e (patch) | |
| tree | d8beaa5f5c58eacee91870af7a7cdcc94b2fff7a /layouts/partials/header.html | |
| parent | 91eeea0d6b61b652a0bc3b16a137609da59da69f (diff) | |
| parent | 9244ad0666c4859569801508348fa83c6e4648f4 (diff) | |
| download | danixxyz-theme-9073908fb5e33c895b162d0418d6e67246af539e.tar.gz danixxyz-theme-9073908fb5e33c895b162d0418d6e67246af539e.zip | |
Merge slackware-projects: project pages, submenu, image roles
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Diffstat (limited to 'layouts/partials/header.html')
| -rw-r--r-- | layouts/partials/header.html | 69 |
1 files changed, 61 insertions, 8 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 603f779..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 := "/" }} @@ -16,13 +16,30 @@ {{ range .Site.Menus.main }} {{ $menuPath := strings.TrimSuffix "/" .URL }} {{ $isActive := eq $menuPath $currentPath }} - <a - href="{{ .URL }}" - class="text-sm transition-colors {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" - {{ if $isActive }}aria-current="page"{{ end }} - > - {{ i18n .Name }} - </a> + {{ $isExternal := .Params.external }} + {{ if .HasChildren }} + {{/* 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 }}" + class="text-sm transition-colors {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" + {{ if $isActive }}aria-current="page"{{ end }} + {{ if $isExternal }}target="_blank" rel="noopener noreferrer"{{ end }} + > + {{ if $isExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }} + </a> + {{ end }} {{ end }} </div> @@ -89,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> |