From 1f9d153e4a574b51018344fc1c1b7e107bfad796 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:47:23 -0700
Subject: [PATCH] Make sure new nav works well with the donate banner

---
 .../templates/fragments/blocks/nav/dropdown.html |  2 +-
 source/js/components/nav/desktop-dropdown.js     |  6 ++++++
 source/js/donate-banner.js                       | 13 ++++++++++++-
 source/js/primary-nav.js                         | 16 ++++++++++++++++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html
index 3928ed69a25..3d1ddb9b5ec 100644
--- a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html
+++ b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html
@@ -6,7 +6,7 @@
 {% fragment as content_desktop %}xlarge:tw-px-0 xlarge:tw-hidden{% endfragment %}
 {% fragment as content_desktop_border %}xlarge:tw-border xlarge:tw-border-gray-20{% endfragment %}
 {% comment %} 40 (5rem) is the height of the navbar {% endcomment %}
-{% fragment as content_desktop_positioning %}xlarge:tw-fixed xlarge:tw-top-40 xlarge:tw-left-0 xlarge:tw-right-0 xlarge:tw-mx-auto{% endfragment %}
+{% fragment as content_desktop_positioning %}xlarge:tw-fixed xlarge:tw-left-0 xlarge:tw-right-0 xlarge:tw-mx-auto{% endfragment %}
 
 {% fragment as title_base_typography %}tw-font-sans tw-font-bold tw-text-xl tw-text-black{% endfragment %}
 {% fragment as title_desktop_typography %}xlarge:tw-text-lg{% endfragment %}
diff --git a/source/js/components/nav/desktop-dropdown.js b/source/js/components/nav/desktop-dropdown.js
index a4852c95622..611b5286293 100644
--- a/source/js/components/nav/desktop-dropdown.js
+++ b/source/js/components/nav/desktop-dropdown.js
@@ -56,8 +56,14 @@ class NavDesktopDropdown extends Accordion {
   open() {
     super.open();
 
+    let topOffset = document
+      .querySelector(".wide-screen-menu-container")
+      .getBoundingClientRect().bottom;
+
     this.accordion.setAttribute("aria-selected", "true");
     this.accordion.classList.remove("tw-grayed-out");
+
+    this.content.style.top = `${topOffset}px`;
     this.content.classList.add("xlarge:tw-flex");
     this.content.classList.remove("xlarge:tw-hidden");
 
diff --git a/source/js/donate-banner.js b/source/js/donate-banner.js
index c22aca4ae93..feed411a9a2 100644
--- a/source/js/donate-banner.js
+++ b/source/js/donate-banner.js
@@ -12,6 +12,13 @@ const DonateBanner = {
       : banner?.querySelector(`a.banner-close`);
 
     // skip the banner if it got dismissed by the user today already
+    if (hideBanner) {
+      // remove the banner from the DOM to prevent it
+      // from creating unexpected behavior due to its absolute positioning.
+      banner.remove();
+      return;
+    }
+
     if (!hideBanner && banner) {
       banner.classList.remove(`tw-hidden`);
     }
@@ -57,8 +64,12 @@ const DonateBanner = {
       );
 
       closeAnimation.onfinish = () => {
-        banner.classList.add(`tw-hidden`);
         this.setDismissDate();
+
+        // The banner will not reappear after the user has dismissed it until the next day.
+        // We might as well remove it from the DOM to prevent it
+        // from creating unexpected behavior due to its absolute positioning.
+        banner.remove();
       };
     });
   },
diff --git a/source/js/primary-nav.js b/source/js/primary-nav.js
index 6130d982117..9bf3ba0591c 100644
--- a/source/js/primary-nav.js
+++ b/source/js/primary-nav.js
@@ -61,12 +61,28 @@ let primaryNav = {
     }
 
     function setMenuState(openMenu) {
+      toggleDonateBanner(openMenu);
       setNarrowMenuState(openMenu);
       setBurgerState(openMenu);
       trackMenuState(openMenu);
       setBodyHeight(openMenu);
     }
 
+    // temporary hide the donate banner when the menu is open
+    function toggleDonateBanner(hideDonateBanner) {
+      const donateBanner = document.querySelector(`.donate-banner`);
+
+      if (!donateBanner) {
+        return;
+      }
+
+      if (hideDonateBanner) {
+        donateBanner.classList.add(`tw-hidden`);
+      } else {
+        donateBanner.classList.remove(`tw-hidden`);
+      }
+    }
+
     document.addEventListener(`keyup`, (e) => {
       if (e.keyCode === 27) {
         menuOpen = false;