66 lines
2.3 KiB
JavaScript
66 lines
2.3 KiB
JavaScript
(() => {
|
|
// resources/js/header.js
|
|
function menuInit() {
|
|
const header = document.querySelector("#main-header");
|
|
searchModule = header.querySelector(".search-module");
|
|
const searchModuleToggle = header.querySelector("#search-module-toggle");
|
|
const submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle");
|
|
const submenusItems = header.querySelectorAll(".sub-menu");
|
|
function isSubmenuOpen() {
|
|
return header.querySelector("sub-menu-open") !== null;
|
|
}
|
|
function openSubmenu(buttonToggle) {
|
|
closeSubmenus();
|
|
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
|
|
buttonToggle.setAttribute("aria-expanded", !isExpanded);
|
|
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
|
|
}
|
|
function closeSubmenus() {
|
|
const openSubmenus = header.querySelectorAll(".sub-menu-open");
|
|
openSubmenus.forEach((submenu) => {
|
|
submenu.classList.remove("sub-menu-open");
|
|
submenu.parentElement.querySelector(".menu-item-submenu-toggle").setAttribute("aria-expanded", "false");
|
|
console.log(submenu.parentElement);
|
|
});
|
|
}
|
|
function isSearchOpen() {
|
|
return searchModule.getAttribute("aria-hidden") === "true";
|
|
}
|
|
function openSearch() {
|
|
searchModule.classList.remove("search-module-open");
|
|
searchModule.classList.add("search-module-closed");
|
|
setTimeout(() => {
|
|
searchModule.setAttribute("aria-hidden", "true");
|
|
}, 400);
|
|
}
|
|
function closeSearch() {
|
|
searchModule.setAttribute("aria-hidden", "false");
|
|
setTimeout(() => {
|
|
searchModule.classList.remove("search-module-closed");
|
|
searchModule.classList.add("search-module-open");
|
|
}, 50);
|
|
searchModuleToggle.toggleAttribute("aria-expanded");
|
|
}
|
|
searchModuleToggle.addEventListener("click", function(e) {
|
|
closeSubmenus();
|
|
if (isSearchOpen()) {
|
|
closeSearch();
|
|
return;
|
|
}
|
|
if (!isSearchOpen()) {
|
|
openSearch();
|
|
}
|
|
});
|
|
submenuToggles.forEach((button) => {
|
|
button.addEventListener("click", () => openSubmenu(button));
|
|
});
|
|
}
|
|
|
|
// resources/js/app.js
|
|
console.log("menuInit");
|
|
console.log("menuIniteeeee");
|
|
window.addEventListener("load", function() {
|
|
menuInit();
|
|
});
|
|
})();
|