From 87a3cb06f4d8c75f92c83985cad8e12c16756540 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 20 Aug 2025 20:01:56 +0100
Subject: [PATCH] fix: nested menus in Tailwind 4 upgrade

---
 .../blox-tailwind/assets/css/blox/navbar.css  | 24 ++++++++++++------
 modules/blox-tailwind/assets/js/hb-nav.js     | 25 +++++++++++++++++--
 .../_partials/components/headers/navbar.html  |  6 ++++-
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/modules/blox-tailwind/assets/css/blox/navbar.css b/modules/blox-tailwind/assets/css/blox/navbar.css
index 326968a6..10359131 100644
--- a/modules/blox-tailwind/assets/css/blox/navbar.css
+++ b/modules/blox-tailwind/assets/css/blox/navbar.css
@@ -54,20 +54,28 @@ input#nav-toggle:checked ~ #nav-menu {
 
 .nav-dropdown {
   @apply mr-0;
+}
 
-  & > svg {
-    @apply pointer-events-none;
-  }
+.nav-dropdown > svg {
+  @apply pointer-events-none;
+}
 
-  &.active {
-    .nav-dropdown-list {
-      @apply block;
-    }
-  }
+.nav-dropdown.active .nav-dropdown-list {
+  @apply block lg:visible lg:opacity-100;
 }
 
 .nav-dropdown-list {
   @apply bg-white dark:bg-slate-900 z-10 min-w-[180px] rounded py-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
+  /* Ensure dropdown appears above content and under header */
+  top: 100%;
+  left: 0;
+}
+
+/* Ensure hover opens dropdown in desktop (CSS-driven) */
+@media (min-width: 1024px) {
+  .nav-dropdown:hover > .nav-dropdown-list {
+    @apply visible opacity-100;
+  }
 }
 
 .nav-dropdown-item {
diff --git a/modules/blox-tailwind/assets/js/hb-nav.js b/modules/blox-tailwind/assets/js/hb-nav.js
index 522b0377..c9500b65 100644
--- a/modules/blox-tailwind/assets/js/hb-nav.js
+++ b/modules/blox-tailwind/assets/js/hb-nav.js
@@ -10,12 +10,33 @@ const applyScrollPadding = () => {
 
 window.addEventListener("DOMContentLoaded", () => {
   const dropdownMenus = document.querySelectorAll(
-    ".nav-dropdown > .nav-link",
+    ".nav-dropdown > .nav-link[role='button']",
   );
 
   dropdownMenus.forEach((toggler) => {
+    const toggle = (el) => {
+      const parent = el.closest(".nav-dropdown");
+      const willActivate = !parent.classList.contains("active");
+      parent.classList.toggle("active", willActivate);
+      el.setAttribute("aria-expanded", willActivate ? "true" : "false");
+    };
+
     toggler?.addEventListener("click", (e) => {
-      e.target.parentElement.classList.toggle("active");
+      e.preventDefault();
+      toggle(e.currentTarget);
+    });
+
+    // Keyboard support
+    toggler?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle(e.currentTarget);
+      }
+      if (e.key === "Escape") {
+        const parent = e.currentTarget.closest(".nav-dropdown");
+        parent?.classList.remove("active");
+        e.currentTarget.setAttribute("aria-expanded", "false");
+      }
     });
   });
 
diff --git a/modules/blox-tailwind/layouts/_partials/components/headers/navbar.html b/modules/blox-tailwind/layouts/_partials/components/headers/navbar.html
index 365b0376..f5ed7950 100644
--- a/modules/blox-tailwind/layouts/_partials/components/headers/navbar.html
+++ b/modules/blox-tailwind/layouts/_partials/components/headers/navbar.html
@@ -60,7 +60,11 @@
       {{ if .HasChildren }}
       <li class="nav-item nav-dropdown group relative">
             <span
-              class="nav-link {{ range .Children }}
+              role="button"
+              tabindex="0"
+              aria-haspopup="true"
+              aria-expanded="false"
+              class="nav-link cursor-pointer select-none {{ range .Children }}
                 {{ $childURL := .URL | absLangURL }}
                 {{ $active := eq $childURL $pageURL }}
                 {{ if $active }}active{{ end }}