feat: add hoverable dropdown effect on menubar

assets/js/core/nav-menu.js

@@ -2,6 +2,29 @@
   const hiddenClass = "hx:hidden";
   const dropdownToggles = document.querySelectorAll(".hextra-nav-menu-toggle");
 
+  // Function to open dropdown
+  function openDropdown(toggle) {
+    const menuItemsElement = toggle.nextElementSibling;
+
+    // Position dropdown centered with toggle
+    menuItemsElement.style.position = "absolute";
+    menuItemsElement.style.top = "100%";
+    menuItemsElement.style.left = "50%";
+    menuItemsElement.style.transform = "translateX(-50%)";
+    menuItemsElement.style.zIndex = "1000";
+
+    // Show dropdown
+    toggle.dataset.state = "open";
+    menuItemsElement.classList.remove(hiddenClass);
+  }
+
+  // Function to close dropdown
+  function closeDropdown(toggle) {
+    toggle.dataset.state = "closed";
+    const menuItemsElement = toggle.nextElementSibling;
+    menuItemsElement.classList.add(hiddenClass);
+  }
+
   dropdownToggles.forEach((toggle) => {
     toggle.addEventListener("click", (e) => {
       e.preventDefault();
@@ -10,32 +33,56 @@
       // Close all other dropdowns first
       dropdownToggles.forEach((otherToggle) => {
         if (otherToggle !== toggle) {
-          otherToggle.dataset.state = "closed";
-          const otherMenuItems = otherToggle.nextElementSibling;
-          otherMenuItems.classList.add(hiddenClass);
+          closeDropdown(otherToggle);
         }
       });
 
       // Toggle current dropdown
       const isOpen = toggle.dataset.state === "open";
-      toggle.dataset.state = isOpen ? "closed" : "open";
-      const menuItemsElement = toggle.nextElementSibling;
-
       if (!isOpen) {
-        // Position dropdown centered with toggle
-        menuItemsElement.style.position = "absolute";
-        menuItemsElement.style.top = "100%";
-        menuItemsElement.style.left = "50%";
-        menuItemsElement.style.transform = "translateX(-50%)";
-        menuItemsElement.style.zIndex = "1000";
-
-        // Show dropdown
-        menuItemsElement.classList.remove(hiddenClass);
+        openDropdown(toggle);
       } else {
-        // Hide dropdown
-        menuItemsElement.classList.add(hiddenClass);
+        closeDropdown(toggle);
       }
     });
+
+    // Mouse enter event for hover effect
+    toggle.addEventListener("mouseenter", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Close all other dropdowns first
+      dropdownToggles.forEach((otherToggle) => {
+        if (otherToggle !== toggle) {
+          closeDropdown(otherToggle);
+        }
+      });
+
+      // Open current dropdown
+      openDropdown(toggle);
+    });
+
+    // Mouse leave event to close dropdown when mouse leaves the toggle
+    toggle.addEventListener("mouseleave", (e) => {
+      // Use a timeout to allow moving to the dropdown menu
+      setTimeout(() => {
+        const menuItemsElement = toggle.nextElementSibling;
+        if (!menuItemsElement.matches(":hover") && toggle.dataset.state === "open") {
+          closeDropdown(toggle);
+        }
+      }, 100);
+    });
+
+    // Also handle mouse leaving the dropdown menu itself
+    const menuItemsElement = toggle.nextElementSibling;
+    menuItemsElement.addEventListener("mouseleave", (e) => {
+      // Use a timeout to allow moving back to the toggle
+      setTimeout(() => {
+        if (!toggle.matches(":hover") && toggle.dataset.state === "open") {
+          closeDropdown(toggle);
+        }
+      }, 100);
+    });
   });
 
   // Dismiss dropdown when clicking outside