From 78b872fcf0cd7b73d335a6208d2bd381897a4e33 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 26 Jun 2026 17:11:28 +0200
Subject: feat: desktop nav submenu for nested menu items (CSS hover +
 focus-within)

---
 layouts/partials/header.html | 50 +++++++++++++++++++++++++++++++++++++-------
 1 file 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>
 
-- 
cgit v1.2.3