fix: submenu as expanding second row inside header glass

Replace floating dropdown box with a full-width centered second row that
expands the existing frosted header panel on hover/focus. Project pages in
the submenu fall back to page title when no menu name is set. Same label
fallback applied to mobile overlay children.

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>