Navigation Dropdown

				
					
// Execute when the DOM content is loaded
window.addEventListener("DOMContentLoaded", () => {
  // Select all elements with class 'has-submenu' that are direct children of an <a> tag
  const subMenus = document.querySelectorAll(".has-submenu > a");

  // Iterate through each 'has-submenu' element
  subMenus.forEach((menuItem) => {
    // Get the parent <li> and its submenu
    const parentLI = menuItem.parentElement;
    const submenu = parentLI.querySelector(".submenu");
    const submenuLinks = submenu.querySelectorAll("a");
    let isSubmenuHovered = false; // Flag to track submenu hover state

    // Function to show the submenu
    function showSubmenu() {
      submenu.classList.add("visible");
      parentLI.setAttribute("aria-expanded", "true");
    }

    // Function to hide the submenu
    function hideSubmenu() {
      if (!isSubmenuHovered) {
        submenu.classList.remove("visible");
        parentLI.setAttribute("aria-expanded", "false");
      }
    }

    // Function to handle backward navigation
    function handleBackwardNavigation(e) {
      const isBackwardTab = e.key === "Tab" && e.shiftKey;
      if (isBackwardTab && submenu.classList.contains("visible")) {
        hideSubmenu();
      }
    }
    
    document.addEventListener('click', (e) => {
      const isClickInsideMenu = menuItem.contains(e.target); // Check if click is inside the menu

      if (!isClickInsideMenu) {
        hideSubmenu();
      }
    });

    // Event listeners for showing and hiding submenu on mouse events
    parentLI.addEventListener("mouseenter", showSubmenu);
    parentLI.addEventListener("mouseleave", hideSubmenu);
    submenu.addEventListener("mouseenter", () => {
      isSubmenuHovered = true;
    });
    submenu.addEventListener("mouseleave", () => {
      isSubmenuHovered = false;
    });

    // Event listener to show submenu on focus
    parentLI.addEventListener("focusin", showSubmenu);

    // Event listener to hide submenu on focus out from the last submenu link
    submenuLinks[submenuLinks.length - 1].addEventListener(
      "focusout",
      hideSubmenu
    );

    // Event listener to hide submenu on 'Escape' key press
    parentLI.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        hideSubmenu();
      }
    });

    // Event listener for handling backward navigation on 'Shift + Tab' key press
    document.addEventListener("keydown", handleBackwardNavigation);

    // Initialize aria-expanded attribute to false
    parentLI.setAttribute("aria-expanded", "false");
  });

  // Event listener to handle submenu hover when leaving the submenu area
  document.addEventListener("mouseover", (event) => {
    if (event.target.tagName === "BODY") {
      isSubmenuHovered = false;
    }
  });
});