[New Nav] fix newsletter signup issues on mobile nav (#12313)

* fixed mobile nav non-reachable newsletter button issue * made newsletter signup form show on mobile nav
MozillaFoundation · May 7, 2024 · 6c2a567 · 6c2a567
1 parent 93bd590
commit 6c2a567
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 17 deletions.
diff --git a/network-api/networkapi/templates/fragments/nav/menu.html b/network-api/networkapi/templates/fragments/nav/menu.html
@@ -7,22 +7,28 @@
     tw-relative
 {% endblock menu_container_classes %}
 
-{% block narrow_screen_menu %}
-    {% fragment as link_hover_padding %}xlarge:tw-p-4{% endfragment %}
-    <div class="tw-bg-white tw-min-h-lvh">
-        <div class="tw-flex tw-flex-col tw-divide-y-[1px] tw-divide-gray-20 tw-border-b tw-border-b-gray-20 tw-w-full" data-nav-accordion-menu>
-            {% for dropdown in menu.dropdowns %}
-                {% include_block dropdown with style="mobile" link_hover_padding=link_hover_padding %}
-            {% endfor %}
-            {% if menu.enable_blog_dropdown %}
-                {% include "fragments/nav/blog/blog-dropdown.html" with style="mobile" link_hover_padding=link_hover_padding %}
-            {% endif %}
-        </div>
-        <div class="tw-flex tw-flex-col tw-items-center tw-p-8 tw-pt-20">
-            <button class="tw-btn-secondary btn-newsletter tw-w-full">{% trans "Newsletter" %}</button>
-        </div>
+{% block menu_content %}
+    <div class="narrow-screen-menu new-nav-enabled tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
+        {% block narrow_screen_menu %}
+            {% fragment as link_hover_padding %}xlarge:tw-p-4{% endfragment %}
+            <div class="narrow-screen-menu-background tw-bg-white tw-min-h-lvh">
+                <div class="narrow-screen-menu-container tw-px-0">
+                    <div class="tw-flex tw-flex-col tw-divide-y-[1px] tw-divide-gray-20 tw-border-b tw-border-b-gray-20 tw-w-full" data-nav-accordion-menu>
+                        {% for dropdown in menu.dropdowns %}
+                            {% include_block dropdown with style="mobile" link_hover_padding=link_hover_padding %}
+                        {% endfor %}
+                        {% if menu.enable_blog_dropdown %}
+                            {% include "fragments/nav/blog/blog-dropdown.html" with style="mobile" link_hover_padding=link_hover_padding %}
+                        {% endif %}
+                    </div>
+                    <div class="tw-flex tw-flex-col tw-items-center tw-p-8 tw-pt-20">
+                        <button class="tw-btn-secondary btn-newsletter tw-w-full">{% trans "Newsletter" %}</button>
+                    </div>
+                </div>
+            </div>
+        {% endblock narrow_screen_menu %}
     </div>
-{% endblock narrow_screen_menu %}
+{% endblock menu_content %}
 
 {% block wide_screen_menu %}
     {% fragment as link_hover_padding %}xlarge:tw-p-4{% endfragment %}

diff --git a/network-api/networkapi/templates/fragments/primary_nav.html b/network-api/networkapi/templates/fragments/primary_nav.html
@@ -6,7 +6,7 @@
 <div class="wrapper-burger {% block wrapper_classes %}{% endblock %}">
     <div class="menu-container xlarge:tw-h-40 tw-py-8 small:tw-pl-0 medium:tw-py-10 xlarge:tw-py-0 {% block menu_container_classes %}{% endblock %}">
         {% block menu_content %}
-            <div class="narrow-screen-menu tw-top-[61px] medium:tw-top-[69px] tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
+            <div class="narrow-screen-menu tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
                 {% block narrow_screen_menu %}
                     <div class="narrow-screen-menu-background tw-dark">
                         <div class="narrow-screen-menu-container ">

diff --git a/source/js/nav-newsletter.js b/source/js/nav-newsletter.js
@@ -11,6 +11,8 @@ import { ReactGA } from "../js/common";
 
 const elements = {
   primaryNav: `.primary-nav-container`,
+  narrowMenu: `.primary-nav-container .narrow-screen-menu`,
+  narrowMenuBackground: `.primary-nav-container .narrow-screen-menu-background`,
   narrowMenuContainer: `.primary-nav-container .narrow-screen-menu-container`,
   wideMenuContainer: `.primary-nav-container .wide-screen-menu-container`,
   buttonMobile: `.primary-nav-container .narrow-screen-menu-container .btn-newsletter`,
@@ -87,6 +89,11 @@ class NavNewsletter {
   // and reset the form
   closeMobileNewsletter() {
     const wrapper = elements.container;
+
+    if (elements.narrowMenu.classList.contains("new-nav-enabled")) {
+      elements.narrowMenuBackground.classList.remove("tw-bg-black");
+      elements.narrowMenuBackground.classList.add("tw-bg-white");
+    }
     elements.narrowMenuContainer.classList.remove("d-none");
     wrapper.classList.remove("faded-in");
     // Schedule a "display:none" to happen after the `expanded` animation finishes.
@@ -103,6 +110,10 @@ class NavNewsletter {
   // transition section to its expanded state
   expandMobileNewsletter() {
     const wrapper = elements.container;
+    if (elements.narrowMenu.classList.contains("new-nav-enabled")) {
+      elements.narrowMenuBackground.classList.remove("tw-bg-white");
+      elements.narrowMenuBackground.classList.add("tw-bg-black");
+    }
     elements.narrowMenuContainer.classList.add(`d-none`);
     wrapper.classList.remove("d-none");
     wrapper.classList.add("faded-in");

diff --git a/source/sass/components/primary-nav.scss b/source/sass/components/primary-nav.scss
@@ -236,7 +236,6 @@
       left: 0;
       right: 0;
       overflow-y: auto;
-      height: 100vh;
       transition:
         opacity 0.2s,
         height 0.5s;
@@ -253,6 +252,20 @@
         }
       }
 
+      &.new-nav-enabled {
+        top: 61px;
+        height: calc(100vh - 61px);
+
+        @media screen and (min-width: $bp-md) {
+          top: 69px;
+          height: calc(100vh - 69px);
+        }
+
+        &.hidden {
+          height: 0;
+        }
+      }
+
       .narrow-screen-menu-container {
         padding: 0 52px;
       }