document.addEventListener(“DOMContentLoaded”, function () { const mainHeaderMenu = document.querySelector(“.main-header-menu”); if (!mainHeaderMenu) return; const mainMenuItemsWithChildren = mainHeaderMenu.querySelectorAll(“.wp-block-navigation-item.has-child”); const customContainer = document.querySelector(“.custom-submenu-container”); if (!customContainer) return; // Create overlay const overlay = document.createElement(“div”); overlay.classList.add(“custom-overlay”); document.body.appendChild(overlay); let isMenuOpen = false; let currentSubmenu = null; let eventListeners = new Map(); // Store event listeners for clean removal function isDesktopView() { return window.innerWidth >= 768; } function openDesktopMenu(menuItem) { const submenu = menuItem.querySelector(“.wp-block-navigation__submenu-container”); if (!submenu) return; const submenuClone = submenu.cloneNode(true); customContainer.innerHTML = “”; customContainer.appendChild(submenuClone); customContainer.style.display = “flex”; overlay.style.display = “block”; isMenuOpen = true; currentSubmenu = menuItem; } function closeDesktopMenu() { customContainer.style.display = “none”; overlay.style.display = “none”; isMenuOpen = false; currentSubmenu = null; } // Function to add desktop-specific event handlers function setupDesktopBehavior() { if (!isDesktopView()) return; // First, remove any previously set listeners to avoid duplicates removeAllEventListeners(); mainMenuItemsWithChildren.forEach(menuItem => { const clickHandler = function(e) { e.preventDefault(); e.stopPropagation(); if (isMenuOpen && menuItem === currentSubmenu) { closeDesktopMenu(); } else { openDesktopMenu(menuItem); } }; // Store the handlers so we can remove them later eventListeners.set(menuItem, clickHandler); menuItem.addEventListener(“click”, clickHandler); // Prevent default on the toggle button as well const toggleButton = menuItem.querySelector(“.wp-block-navigation-submenu__toggle”); if (toggleButton) { const toggleHandler = function(e) { e.preventDefault(); e.stopPropagation(); }; eventListeners.set(toggleButton, toggleHandler); toggleButton.addEventListener(“click”, toggleHandler); } }); // Setup other events needed for desktop behavior const documentClickHandler = function(e) { if (isMenuOpen && !customContainer.contains(e.target) && !currentSubmenu?.contains(e.target)) { closeDesktopMenu(); } }; eventListeners.set(document, documentClickHandler); document.addEventListener(“click”, documentClickHandler); const overlayClickHandler = function() { closeDesktopMenu(); }; eventListeners.set(overlay, overlayClickHandler); overlay.addEventListener(“click”, overlayClickHandler); } // Function to remove all custom event listeners function removeAllEventListeners() { eventListeners.forEach((handler, element) => { if (element === document) { document.removeEventListener(“click”, handler); } else if (element === overlay) { overlay.removeEventListener(“click”, handler); } else { element.removeEventListener(“click”, handler); } }); eventListeners.clear(); } // Function to handle view changes function handleViewChange() { if (isDesktopView()) { setupDesktopBehavior(); } else { // For mobile: completely remove our handlers removeAllEventListeners(); closeDesktopMenu(); } } // Initial setup handleViewChange(); // Handle window resize window.addEventListener(“resize”, function() { handleViewChange(); }); });