From 383c4f7a7c64450dcb993ec1db3a63b87b93836d Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 26 Jun 2026 17:31:46 +0200
Subject: 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.
---
 assets/css/main.min.css              | 44 ++++----------------
 layouts/partials/hamburger-menu.html | 12 +++++-
 layouts/partials/header.html         | 81 ++++++++++++++++++++++--------------
 3 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 0278dc9..44735f9 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -2343,10 +2343,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   left: 0px;
 }
 
-.left-1\/2 {
-  left: 50%;
-}
-
 .left-3 {
   left: 0.75rem;
 }
@@ -2379,10 +2375,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   top: 1rem;
 }
 
-.top-full {
-  top: 100%;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -2666,11 +2658,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   min-width: 0px;
 }
 
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -2715,11 +2702,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   flex-shrink: 0;
 }
 
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3129,10 +3111,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   padding-top: 0.5rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
@@ -3319,12 +3297,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   opacity: 0.75;
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -5258,14 +5230,6 @@ html.theme-light .hero-name {
   opacity: 0.5;
 }
 
-.group:focus-within .group-focus-within\:flex {
-  display: flex;
-}
-
-.group:hover .group-hover\:flex {
-  display: flex;
-}
-
 .group:hover .group-hover\:scale-105 {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -5362,6 +5326,14 @@ html.theme-light .hero-name {
     font-size: 6rem;
     line-height: 1;
   }
+
+  .group\/header:focus-within .md\:group-focus-within\/header\:flex {
+    display: flex;
+  }
+
+  .group\/header:hover .md\:group-hover\/header\:flex {
+    display: flex;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/layouts/partials/hamburger-menu.html b/layouts/partials/hamburger-menu.html
index 248b172..0280ecb 100644
--- a/layouts/partials/hamburger-menu.html
+++ b/layouts/partials/hamburger-menu.html
@@ -46,13 +46,23 @@
           <div class="pl-4 border-l-2 border-accent/40 ml-2">
             {{ range .Children }}
               {{ $childExternal := .Params.external }}
+              {{ $label := "" }}
+              {{ if $childExternal }}
+                {{ $label = .Name }}
+              {{ else if and .Name (i18n .Name) }}
+                {{ $label = i18n .Name }}
+              {{ else if .Page }}
+                {{ $label = .Page.LinkTitle }}
+              {{ else }}
+                {{ $label = .Name }}
+              {{ end }}
               <a
                 href="{{ .URL }}"
                 @click="menuOpen = false"
                 class="block py-3 text-base 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 }}
               >
-                {{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }}
+                {{ $label }}
               </a>
             {{ end }}
           </div>
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>
-- 
cgit v1.2.3