From acddd5776d859291bb4ae1b64fa95cd63147fa95 Mon Sep 17 00:00:00 2001
From: thomassnoeck <thomassnoeck@hotmail.com>
Date: Thu, 18 Sep 2025 15:11:26 +0200
Subject: [PATCH] Fix dropdown menu navigation on mobile devices

---
 src/layouts/components/Dropdown.astro | 80 +++++++++++++++++++++++++++
 src/layouts/partials/Header.astro     | 21 +------
 2 files changed, 83 insertions(+), 18 deletions(-)
 create mode 100644 src/layouts/components/Dropdown.astro

diff --git a/src/layouts/components/Dropdown.astro b/src/layouts/components/Dropdown.astro
new file mode 100644
index 00000000..1e3cc86f
--- /dev/null
+++ b/src/layouts/components/Dropdown.astro
@@ -0,0 +1,80 @@
+---
+export interface ChildNavigationLink {
+  name: string;
+  url: string;
+}
+
+export interface Props {
+  name: string;
+  children: ChildNavigationLink[];
+}
+
+const { name, children } = Astro.props;
+---
+
+<li class="nav-item nav-dropdown group relative cursor-pointer">
+  <span class="nav-link inline-flex items-center">
+    {name}
+    <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20">
+      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+    </svg>
+  </span>
+  <ul class="nav-dropdown-list hidden group-hover:block md:invisible md:absolute md:block md:opacity-0 md:group-hover:visible md:group-hover:opacity-100">
+    {children.map((child) => (
+      <li class="nav-dropdown-item">
+        <a href={child.url} class="nav-dropdown-link">
+          {child.name}
+        </a>
+      </li>
+    ))}
+  </ul>
+</li>
+
+<script>
+    function setupDropdowns() {
+    const dropdowns = document.querySelectorAll(".nav-dropdown");
+
+    dropdowns.forEach((dropdown) => {
+        const trigger = dropdown.querySelector<HTMLElement>(".nav-link");
+        if (!trigger || trigger.dataset.listenerAttached) return;
+
+        trigger.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        document.querySelectorAll(".nav-dropdown").forEach((other) => {
+            if (other !== dropdown) other.classList.remove("dropdown-open");
+        });
+
+        dropdown.classList.toggle("dropdown-open");
+        });
+
+        trigger.dataset.listenerAttached = "true";
+    });
+    }
+
+    document.addEventListener("click", (event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target || !target.closest(".nav-dropdown")) {
+        document.querySelectorAll<HTMLElement>(".nav-dropdown.dropdown-open").forEach((dropdown) => {
+        dropdown.classList.remove("dropdown-open");
+        });
+    }
+    });
+
+    document.addEventListener("astro:page-load", setupDropdowns);
+    document.addEventListener("astro:after-swap", setupDropdowns);
+</script>
+
+<style>
+  .nav-dropdown.dropdown-open > .nav-dropdown-list {
+    display: block;
+  }
+
+  @media (min-width: 768px) {
+    .nav-dropdown.dropdown-open > .nav-dropdown-list {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/src/layouts/partials/Header.astro b/src/layouts/partials/Header.astro
index e428cd02..e8bbbc27 100755
--- a/src/layouts/partials/Header.astro
+++ b/src/layouts/partials/Header.astro
@@ -1,5 +1,6 @@
 ---
 import Logo from "@/components/Logo.astro";
+import Dropdown from "@/components/Dropdown.astro";
 import menu from "@/config/menu.json";
 import { IoSearch } from "react-icons/io5";
 
@@ -57,24 +58,8 @@ const { main }: { main: NavigationLink[] } = menu;
       {
         main.map((menu) => (
           <>
-            {menu.hasChildren ? (
-              <li class="nav-item nav-dropdown group relative cursor-pointer">
-                <span class="nav-link inline-flex items-center">
-                  {menu.name}
-                  <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20">
-                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                  </svg>
-                </span>
-                <ul class="nav-dropdown-list hidden group-hover:block md:invisible md:absolute md:block md:opacity-0 md:group-hover:visible md:group-hover:opacity-100">
-                  {menu.children?.map((child) => (
-                    <li class="nav-dropdown-item">
-                      <a href={child.url} class="nav-dropdown-link">
-                        {child.name}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </li>
+            {menu.hasChildren && menu.children ? (
+              <Dropdown name={menu.name} children={menu.children} />
             ) : (
               <li class="nav-item">
                 <a href={menu.url} class="nav-link block">