(() => { // resources/js/header.js function menuInit() { const header = document.querySelector("#main-header"); const searchModule = header.querySelector(".search-module"); const searchModuleToggle = header.querySelector("#search-module-toggle"); const mobileMenuToggle = header.querySelector("#mobile-menu-toggle"); const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle"); const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close"); function isSubmenuOpen() { return header.querySelector("sub-menu-open") !== null; } function openSubmenu(buttonToggle) { let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true"; buttonToggle.setAttribute("aria-expanded", !isExpanded); buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--open"); buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--closed"); } function closeSubmenus() { const openSubmenus = header.querySelectorAll(".sub-menu--open"); openSubmenus.forEach((submenu) => { submenu.classList.remove("sub-menu--open"); submenu.classList.add("sub-menu--closed"); submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false"); }); } function handleSubmenuToggle(buttonToggle) { let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true"; if (!isExpanded) { closeSubmenus(); openSubmenu(buttonToggle); } else { closeSubmenus(); } } function closeCurrentSubmenu(buttonClose) { console.log("close submenu"); console.log(buttonClose.parentElement); const currentOpenedSubmenu = buttonClose.parentElement; currentOpenedSubmenu.classList.remove("sub-menu--open"); currentOpenedSubmenu.classList.add("sub-menu--closed"); currentOpenedSubmenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false"); } submenuToggles.forEach((button) => { button.addEventListener("click", () => { if (isSearchOpen() === true) { closeSearch(); } handleSubmenuToggle(button); }); }); submenuCloseBtns.forEach((button) => { button.addEventListener("click", () => closeCurrentSubmenu(button)); }); function isSearchOpen() { if (searchModule.getAttribute("mobile-closed") != null && searchModule.getAttribute("aria-hidden") != null && searchModule.getAttribute("mobile-opened") === null) { return false; } if (searchModule.getAttribute("mobile-opened") != null && searchModule.getAttribute("mobile-closed") === null && searchModule.getAttribute("aria-hidden") === null) { return true; } return null; } function openSearch() { searchModuleToggle.setAttribute("aria-expanded", ""); searchModule.setAttribute("mobile-opened", ""); searchModule.removeAttribute("mobile-closed"); setTimeout(() => { searchModule.removeAttribute("aria-hidden"); }, 400); } function closeSearch() { searchModule.setAttribute("aria-hidden", ""); searchModule.removeAttribute("mobile-opened", ""); searchModule.setAttribute("mobile-closing", ""); searchModule.addEventListener("animationend", () => { searchModule.setAttribute("mobile-closed", ""); searchModule.removeAttribute("mobile-closing", ""); }, { once: true }); searchModuleToggle.toggleAttribute("aria-expanded"); } searchModuleToggle.addEventListener("click", function(e) { closeSubmenus(); if (isSearchOpen() === false) { openSearch(); return; } if (isSearchOpen() === true) { closeSearch(); } }); const renovateurNavListContainer = header.querySelector(".menu-renovateur__navlist-container"); const HomegradeNavListContainer = header.querySelector(".menu-homegrade"); function openMenu(menuContainer) { menuContainer.removeAttribute("closed", ""); menuContainer.setAttribute("opened", ""); menuContainer.removeAttribute("aria-hidden", ""); menuContainer.setAttribute("opening", ""); menuContainer.addEventListener("animationend", () => { menuContainer.removeAttribute("opening", ""); }, { once: true }); } function closeMenu(menuContainer) { menuContainer.removeAttribute("opened"); menuContainer.setAttribute("aria-hidden", ""); menuContainer.setAttribute("closing", ""); menuContainer.addEventListener("animationend", () => { menuContainer.setAttribute("closed", ""); menuContainer.removeAttribute("closing", ""); }, { once: true }); } mobileMenuToggle.addEventListener("click", function(e) { const isNavOpened = renovateurNavListContainer.hasAttribute("opened"); const textContent = mobileMenuToggle.querySelector("span.text-content"); const dataTextOpen = mobileMenuToggle.getAttribute("data-text-open"); const dataTextClose = mobileMenuToggle.getAttribute("data-text-close"); textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose; mobileMenuToggle.toggleAttribute("aria-expanded"); if (isNavOpened) { closeMenu(renovateurNavListContainer); closeMenu(HomegradeNavListContainer); } if (!isNavOpened) { openMenu(renovateurNavListContainer); openMenu(HomegradeNavListContainer); } }); } // resources/js/app.js window.addEventListener("load", function() { menuInit(); }); })();