diff --git a/assets/js/menu.js b/assets/js/menu.js index 286d2027f..387bd3062 100644 --- a/assets/js/menu.js +++ b/assets/js/menu.js @@ -2,26 +2,25 @@ const container = document.querySelector(".container"); const menu = document.querySelector(".menu"); const mobileMenuTrigger = document.querySelector(".menu-trigger"); const desktopMenu = document.querySelector(".menu__inner--desktop"); -const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger"); -const menuMore = document.querySelector(".menu__sub-inner-more"); +const allMenuMores = document.querySelectorAll(".menu__sub-inner-more"); const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); const isMobile = () => window.matchMedia(mobileQuery).matches; const isMobileMenu = () => { mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile()); menu && menu.classList.toggle("hidden", isMobile()); - menuMore && menuMore.classList.toggle("hidden", !isMobile()); + allMenuMores.forEach(menuMore => menuMore.classList.toggle("hidden", !isMobile())); }; // Common menu && menu.addEventListener("click", e => e.stopPropagation()); -menuMore && menuMore.addEventListener("click", e => e.stopPropagation()); +allMenuMores.forEach(menuMore => menuMore.addEventListener("click", e => e.stopPropagation())); isMobileMenu(); document.body.addEventListener("click", () => { - if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) { - menuMore.classList.add("hidden"); + if (!isMobile()) { + allMenuMores.forEach(menuMore => menuMore.classList.add("hidden")); } else if (isMobile() && !menu.classList.contains("hidden")) { menu.classList.add("hidden"); } @@ -39,16 +38,27 @@ mobileMenuTrigger && // Desktop menu -desktopMenuTrigger && - desktopMenuTrigger.addEventListener("click", e => { - e.stopPropagation(); - menuMore && menuMore.classList.toggle("hidden"); - - if ( - menuMore && - menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right - ) { - menuMore.style.left = "auto"; - menuMore.style.right = 0; - } +desktopMenu && + desktopMenu.querySelectorAll(".menu__sub-inner").forEach(desktopSubMenu => { + const desktopMenuTrigger = desktopSubMenu.querySelector(".menu__sub-inner-more-trigger"); + const menuMore = desktopSubMenu.querySelector(".menu__sub-inner-more"); + desktopMenuTrigger.addEventListener("click", e => { + // Hide other menus if this one was clicked. + allMenuMores.forEach(otherMenuMore => { + if (otherMenuMore !== menuMore) { + otherMenuMore.classList.add("hidden"); + } + }); + + e.stopPropagation(); + menuMore && menuMore.classList.toggle("hidden"); + + if ( + menuMore && + menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right + ) { + menuMore.style.left = "auto"; + menuMore.style.right = 0; + } + }); }); diff --git a/static/assets/main.js b/static/assets/main.js index 32b694d4d..e2071f503 100644 --- a/static/assets/main.js +++ b/static/assets/main.js @@ -1 +1 @@ -!function(){var e,t,n,o,i,d,c,s,r,a,l;e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),document.querySelector(".menu__inner--desktop"),o=document.querySelector(".menu__sub-inner-more-trigger"),i=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(d).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),i&&i.classList.toggle("hidden",!c())},t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),i&&i.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!i||i.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):i.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),o&&o.addEventListener("click",(function(t){t.stopPropagation(),i&&i.classList.toggle("hidden"),i&&i.getBoundingClientRect().right>e.getBoundingClientRect().right&&(i.style.left="auto",i.style.right=0)})),r=window.localStorage&&window.localStorage.getItem("theme"),a=document.querySelector(".theme-toggle"),l="dark"===r,null!==r&&document.body.classList.toggle("dark-theme",l),a.addEventListener("click",(function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")}))}(); \ No newline at end of file +!function(){var e,t,n,o,i,r,c,d,s,a,l;e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),o=document.querySelector(".menu__inner--desktop"),i=document.querySelectorAll(".menu__sub-inner-more"),r=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(r).matches},d=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),i.forEach((function(e){return e.classList.toggle("hidden",!c())}))},t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),i.forEach((function(e){return e.addEventListener("click",(function(e){return e.stopPropagation()}))})),d(),document.body.addEventListener("click",(function(){c()?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):i.forEach((function(e){return e.classList.add("hidden")}))})),window.addEventListener("resize",d),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),o&&o.querySelectorAll(".menu__sub-inner").forEach((function(t){var n=t.querySelector(".menu__sub-inner-more-trigger"),o=t.querySelector(".menu__sub-inner-more");n.addEventListener("click",(function(t){i.forEach((function(e){e!==o&&e.classList.add("hidden")})),t.stopPropagation(),o&&o.classList.toggle("hidden"),o&&o.getBoundingClientRect().right>e.getBoundingClientRect().right&&(o.style.left="auto",o.style.right=0)}))})),s=window.localStorage&&window.localStorage.getItem("theme"),a=document.querySelector(".theme-toggle"),l="dark"===s,null!==s&&document.body.classList.toggle("dark-theme",l),a.addEventListener("click",(function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")}))}(); \ No newline at end of file