From 645f87f1e12905f2158d4465370a03df5be1634e Mon Sep 17 00:00:00 2001
From: Barney Laurance <barney@thebiggive.org.uk>
Date: Wed, 18 Dec 2024 15:04:42 +0000
Subject: [PATCH 1/2] DON-1065: Add white background to main-menu submenus when
 opened via click

Affects mainly wide touch-screen devices such as tablets or horizontal
phones. Currently in prod these can't open the menu at all, and in
staging the menu opens but has a transparent background so is not
readable.
---
 src/components/biggive-main-menu/biggive-main-menu.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/biggive-main-menu/biggive-main-menu.scss b/src/components/biggive-main-menu/biggive-main-menu.scss
index 6d7a4b8d..06d0b04a 100644
--- 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;

From 90afe04fbb06e23efb02427ecc70774b3dabb653 Mon Sep 17 00:00:00 2001
From: Barney Laurance <barney@thebiggive.org.uk>
Date: Wed, 18 Dec 2024 15:05:44 +0000
Subject: [PATCH 2/2] DON-1065: Auto-close other sub-menus when opening one via
 click / touch

---
 .../biggive-main-menu/biggive-main-menu.tsx     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/biggive-main-menu/biggive-main-menu.tsx b/src/components/biggive-main-menu/biggive-main-menu.tsx
index acd23ccc..334345cb 100644
--- 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');
       };