Make sure new nav works well with the donate banner

MozillaFoundation · Sep 26, 2024 · 1f9d153 · 1f9d153
1 parent 485ba28
commit 1f9d153
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;