From 19da5064c3991990fb18ba1f546be38392b9a148 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Tue, 7 May 2024 12:42:18 -0700
Subject: [PATCH 1/3] fixed mobile nav non-reachable newsletter button issue

---
 .../templates/fragments/nav/menu.html         | 32 +++++++++++--------
 .../templates/fragments/primary_nav.html      |  2 +-
 .../networkapi/templates/pages/base.html      |  2 +-
 source/sass/components/primary-nav.scss       | 15 ++++++++-
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/nav/menu.html b/network-api/networkapi/templates/fragments/nav/menu.html
index 929df7da7de..ffe43028631 100644
--- a/network-api/networkapi/templates/fragments/nav/menu.html
+++ b/network-api/networkapi/templates/fragments/nav/menu.html
@@ -7,22 +7,26 @@
     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>
+{% 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="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>
         </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
index 6429a23d9be..1f662354957 100644
--- 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/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html
index 660959449c1..af4f9b294e0 100644
--- a/network-api/networkapi/templates/pages/base.html
+++ b/network-api/networkapi/templates/pages/base.html
@@ -86,7 +86,7 @@
             <base target="_blank">
         {% endif %}
     </head>
-    <body class="{% block bodyclass %}{% endblock %}" id="view-{% block body_id %}{% endblock %}">
+        <body class="{% block bodyclass %}{% endblock %}" id="view-{% block body_id %}{% endblock %}">
         {% if user.is_authenticated %}
             {% wagtailuserbar 'bottom-left' %}
         {% endif %}
diff --git a/source/sass/components/primary-nav.scss b/source/sass/components/primary-nav.scss
index 63ed61747a1..43b7ab9dba8 100644
--- 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;
       }

From 22c4a791dce6803dc9b535479f0bb54211584455 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Tue, 7 May 2024 13:40:46 -0700
Subject: [PATCH 2/3] linting

---
 .../templates/fragments/nav/menu.html         | 30 +++++++++----------
 .../networkapi/templates/pages/base.html      |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/nav/menu.html b/network-api/networkapi/templates/fragments/nav/menu.html
index ffe43028631..f0e334dede3 100644
--- a/network-api/networkapi/templates/fragments/nav/menu.html
+++ b/network-api/networkapi/templates/fragments/nav/menu.html
@@ -9,22 +9,22 @@
 
 {% 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="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 %}
+        {% 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>
             </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>
-    {% endblock narrow_screen_menu %}
+        {% endblock narrow_screen_menu %}
     </div>
 {% endblock menu_content %}
 
diff --git a/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html
index af4f9b294e0..660959449c1 100644
--- a/network-api/networkapi/templates/pages/base.html
+++ b/network-api/networkapi/templates/pages/base.html
@@ -86,7 +86,7 @@
             <base target="_blank">
         {% endif %}
     </head>
-        <body class="{% block bodyclass %}{% endblock %}" id="view-{% block body_id %}{% endblock %}">
+    <body class="{% block bodyclass %}{% endblock %}" id="view-{% block body_id %}{% endblock %}">
         {% if user.is_authenticated %}
             {% wagtailuserbar 'bottom-left' %}
         {% endif %}

From 1ccf0ff16380f90eb5739bd9ef596462606fca86 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Tue, 7 May 2024 13:49:37 -0700
Subject: [PATCH 3/3] made newsletter signup form show on mobile nav

---
 .../templates/fragments/nav/menu.html         | 24 ++++++++++---------
 source/js/nav-newsletter.js                   | 11 +++++++++
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/nav/menu.html b/network-api/networkapi/templates/fragments/nav/menu.html
index f0e334dede3..d430275117f 100644
--- a/network-api/networkapi/templates/fragments/nav/menu.html
+++ b/network-api/networkapi/templates/fragments/nav/menu.html
@@ -11,17 +11,19 @@
     <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="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 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 %}
diff --git a/source/js/nav-newsletter.js b/source/js/nav-newsletter.js
index 0401ae357bb..f7c3da76117 100644
--- 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");