Merge pull request #653 from thebiggive/DON-1065-menus-2

Don 1065 menus 2
thebiggive · Dec 18, 2024 · a59eef6 · a59eef6
2 parents 6ed9d05 + 90afe04
commit a59eef6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/components/biggive-main-menu/biggive-main-menu.scss b/src/components/biggive-main-menu/biggive-main-menu.scss
@@ -433,6 +433,11 @@ nav {
   display: block !important;
 }
 
+#nav-primary .display-sub-menu, #nav-primary .display-sub-menu li {
+  background-color: white;
+}
+
+
 .sub-menu-main {
   position: absolute;
   top: $upper-nav-height-desktop;

diff --git a/src/components/biggive-main-menu/biggive-main-menu.tsx b/src/components/biggive-main-menu/biggive-main-menu.tsx
@@ -94,12 +94,29 @@ export class BiggiveMainMenu {
       throw new Error('Missing subMenuElements');
     }
 
+    /**
+     * Closes all the sub-menus except the one exception.
+     */
+    const closeAllSubMenus = ({ except }: { except: HTMLAnchorElement }) => {
+      subMenuElements.forEach(subMenuElement => {
+        const link = subMenuElement.parentElement?.querySelector('a');
+
+        if (link === except) {
+          return;
+        }
+
+        link?.classList.remove('transform-90');
+        subMenuElement.classList.remove('display-sub-menu');
+      });
+    };
+
     subMenuElements.forEach(subMenuElement => {
       // the subMenuLink is a sibling element to the actual sub-menu
       const subMenuLink = subMenuElement.parentElement?.querySelector('a');
 
       subMenuLink!.onclick = () => {
         const subMenuArrow = subMenuLink!.querySelector('.sub-menu-arrow');
+        closeAllSubMenus({ except: subMenuLink! });
         subMenuArrow!.classList.toggle('transform-90');
         subMenuElement.classList.toggle('display-sub-menu');
       };