diff options
Diffstat (limited to 'layouts/partials/header.html')
| -rw-r--r-- | layouts/partials/header.html | 50 |
1 files changed, 43 insertions, 7 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 603f779..8ee657c 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -16,13 +16,49 @@ {{ 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 }} + {{/* 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> + {{ 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> |