Add support for multiple submenus on desktop.

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;
+      }
+    });
   });