From 5dedb41343ba0880687666caeee0d21e02b1cd53 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:23:44 -0800
Subject: [PATCH] active state

---
 .../templates/fragments/primary_nav.html      |  2 +-
 .../fragments/prototype_nav_links.html        |  2 +-
 .../fragments/prototype_nav_links_mobile.html |  6 +-
 source/js/common/prototype-main-nav.js        | 77 ++++++++++++++-----
 source/sass/components/primary-nav.scss       | 28 ++++---
 5 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/primary_nav.html b/network-api/networkapi/templates/fragments/primary_nav.html
index de9aefa0746..e406d2351b9 100644
--- a/network-api/networkapi/templates/fragments/primary_nav.html
+++ b/network-api/networkapi/templates/fragments/primary_nav.html
@@ -13,7 +13,7 @@
                             <div class="tw-container" role="navigation">
                                 <div class="tw-row">
                                     <div class="tw-flex-grow tw-max-w-full tw-flex-1">
-                                        <div class="nav-links pt-3">
+                                        <div class="nav-links">
                                             {% block narrow_screen_nav_links %}
                                                 <div><a class="{% primary_active_nav request menu_root.full_url menu_root.full_url %}" href="{{ menu_root.url }}">{% trans "Home" %}</a></div>
                                                 {% include "fragments/prototype_nav_links_mobile.html" %}
diff --git a/network-api/networkapi/templates/fragments/prototype_nav_links.html b/network-api/networkapi/templates/fragments/prototype_nav_links.html
index 2b048aa8904..c8ff65b094e 100644
--- a/network-api/networkapi/templates/fragments/prototype_nav_links.html
+++ b/network-api/networkapi/templates/fragments/prototype_nav_links.html
@@ -1,7 +1,7 @@
 <script type="text/template" id="prototype-nav-links-template">
     <% _.each(navItems, function(navItem, index) { %>
     <div class="nav-item-wrapper tw-inline-block tw-group">
-        <a class="primary tw-capitalize" href="<%= navItem.url %>" data-name="<%= navItem.name %>"><%= navItem.name %></a>
+        <a class="tw-primary-nav tw-capitalize" href="<%= navItem.url %>" data-name="<%= navItem.name %>"><%= navItem.name %></a>
         <div class="submenu tw-nav-submenu tw-z-40 tw-container tw-invisible tw-opacity-0 tw-transition tw-duration-250 group-hover:tw-visible group-focus:tw-visible group-focus-visible:tw-visible group-focus-within:tw-visible group-hover:tw-opacity-100 group-focus:tw-opacity-100 group-focus-visible:tw-opacity-100 group-focus-within:tw-opacity-100 tw-absolute tw-top-[calc(100%+16px)] tw-left-0">
             <div class="tw-row <% if (index >= 3) { %>tw-justify-end<% } %>">
                 <div class="tw-w-<%= navItem.totalDesktopColumnSpan %>/4 tw-grid tw-grid-cols-<%= navItem.totalDesktopColumnSpan %> tw-border tw-bg-white tw-border-gray-20 ">
diff --git a/network-api/networkapi/templates/fragments/prototype_nav_links_mobile.html b/network-api/networkapi/templates/fragments/prototype_nav_links_mobile.html
index 6da23102dd4..985432da3df 100644
--- a/network-api/networkapi/templates/fragments/prototype_nav_links_mobile.html
+++ b/network-api/networkapi/templates/fragments/prototype_nav_links_mobile.html
@@ -1,7 +1,7 @@
 <script type="text/template" id="prototype-nav-links-mobile-template">
     <% _.each(navItems, function(navItem, index) { %>
-    <div class="nav-item-wrapper tw-px-8 tw-block tw-group tw-border-b tw-border-gray-20">
-        <button class="tw-primary-nav tw-capitalize tw-text-[20px] tw-px-0 tw-py-12 tw-w-full tw-text-left tw-bg-transparent hover:tw-bg-transparent" aria-expanded="false" href="<%= navItem.url %>" data-name="<%= navItem.name %>"><%= navItem.name %></button>
+    <div class="nav-item-wrapper tw-px-8 tw-block tw-group tw-border-b tw-border-b-gray-20" data-name="<%= navItem.name %>">
+        <button class="tw-primary-nav tw-capitalize tw-text-[20px] tw-px-0 tw-py-12 tw-w-full tw-text-left tw-bg-transparent hover:tw-bg-transparent" aria-expanded="false" href="<%= navItem.url %>"><%= navItem.name %></button>
         <div class="submenu tw-nav-submenu tw-overflow-hidden tw-transition-all tw-duration-500">
             <div class="tw-row <% if (index >= 3) { %>tw-justify-end<% } %>">
                 <div class="tw-w-full">
@@ -31,7 +31,7 @@ <h2 class="{{ heading_class }}"><%= section.title %></h2>
                                             <% } %>
                                         </a>
                                         <% if (link.description) { %>
-                                        <p class="tw-text-gray-80 tw-text-sm"><%= link.description %></p>
+                                        <p class="tw-text-gray-80 tw-text-sm tw-hidden small:tw-block"><%= link.description %></p>
                                         <% } %>
                                     </li>
                                     <% }); %>
diff --git a/source/js/common/prototype-main-nav.js b/source/js/common/prototype-main-nav.js
index b3cb9d71b2c..0d665a49e9d 100644
--- a/source/js/common/prototype-main-nav.js
+++ b/source/js/common/prototype-main-nav.js
@@ -27,41 +27,52 @@ class WidePrimaryNav {
     }
 
     this.NAV_LINKS_WRAPPER.querySelector(
-      `a.primary[data-name="${navData.primaryNavLookUp[currentPath]}"]`
+      `.tw-primary-nav[data-name="${navData.primaryNavLookUp[currentPath]}"]`
     ).classList.add(this.LINK_ACTIVE_CLASS);
   }
 
   grayOutAllLinks(grayOut = false, onHoverLink = null) {
-    this.NAV_LINKS_WRAPPER.querySelectorAll("a.primary").forEach((link) => {
-      if (link === onHoverLink) {
-        return;
+    this.NAV_LINKS_WRAPPER.querySelectorAll("a.tw-primary-nav").forEach(
+      (link) => {
+        if (link === onHoverLink) {
+          return;
+        }
+
+        if (grayOut) {
+          link.classList.add(this.LINK_GRAYED_OUT_CLASS);
+        } else {
+          link.classList.remove(this.LINK_GRAYED_OUT_CLASS);
+        }
       }
-
-      if (grayOut) {
-        link.classList.add(this.LINK_GRAYED_OUT_CLASS);
-      } else {
-        link.classList.remove(this.LINK_GRAYED_OUT_CLASS);
-      }
-    });
+    );
   }
 
   setEventHandlers() {
     this.NAV_LINKS_WRAPPER.querySelectorAll(".nav-item-wrapper").forEach(
       (wrapper) => {
         wrapper.addEventListener("mouseenter", () => {
-          this.grayOutAllLinks(true, wrapper.querySelector("a.primary"));
+          this.grayOutAllLinks(true, wrapper.querySelector("a.tw-primary-nav"));
         });
 
         wrapper.addEventListener("focusin", () => {
-          this.grayOutAllLinks(true, wrapper.querySelector("a.primary"));
+          this.grayOutAllLinks(
+            true,
+            wrapper.querySelector("a.primatw-primary-navry")
+          );
         });
 
         wrapper.addEventListener("mouseleave", () => {
-          this.grayOutAllLinks(false, wrapper.querySelector("a.primary"));
+          this.grayOutAllLinks(
+            false,
+            wrapper.querySelector("a.tw-primary-nav")
+          );
         });
 
         wrapper.addEventListener("focusout", () => {
-          this.grayOutAllLinks(false, wrapper.querySelector("a.primary"));
+          this.grayOutAllLinks(
+            false,
+            wrapper.querySelector("a.tw-primary-nav")
+          );
         });
       }
     );
@@ -87,7 +98,30 @@ class NarrowPrimaryNav extends WidePrimaryNav {
     );
   }
 
-  setActiveNavLink() {}
+  setActiveNavLink() {
+    const currentPath = window.location.pathname;
+
+    if (currentPath === "/" || currentPath === "/en/") {
+      return;
+    }
+
+    let activeNavSection = this.NAV_LINKS_WRAPPER.querySelector(
+      `.nav-item-wrapper[data-name="${navData.primaryNavLookUp[currentPath]}"]`
+    );
+
+    if (!activeNavSection) {
+      return;
+    }
+
+    activeNavSection.classList.add(this.LINK_ACTIVE_CLASS);
+    activeNavSection
+      .querySelectorAll("a.tw-secondary-nav-link")
+      .forEach((link) => {
+        if (link.getAttribute("href") === window.location.pathname) {
+          link.classList.add(this.LINK_ACTIVE_CLASS);
+        }
+      });
+  }
 
   slide(element, direction = "down") {
     if (direction === "down") {
@@ -115,12 +149,17 @@ class NarrowPrimaryNav extends WidePrimaryNav {
     );
   }
 
-  init(data) {
-    this.renderCompiledTemplate(data);
-    this.setEventHandlers();
+  collapseAllSubmenus() {
     this.NAV_LINKS_WRAPPER.querySelectorAll(".submenu").forEach((submenu) => {
       this.slide(submenu, "up");
     });
+  }
+
+  init(data) {
+    this.renderCompiledTemplate(data);
+    this.setEventHandlers();
+    this.setActiveNavLink();
+    this.collapseAllSubmenus();
 
     console.log(data);
   }
diff --git a/source/sass/components/primary-nav.scss b/source/sass/components/primary-nav.scss
index 8efdb05f467..41539d5a497 100644
--- a/source/sass/components/primary-nav.scss
+++ b/source/sass/components/primary-nav.scss
@@ -118,7 +118,7 @@
       }
     }
 
-    a.primary {
+    .tw-primary-nav {
       font-size: 17px;
       line-height: calc(23 / 17);
       border-bottom: 6px solid transparent;
@@ -152,6 +152,20 @@
     }
   }
 
+  .narrow-screen-menu-container .nav-links {
+    .nav-item-wrapper {
+      &.active {
+        border-left: 4px $black solid;
+      }
+
+      .tw-secondary-nav-link {
+        &.active {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
   .wrapper-burger {
     transition: background 200ms ease-in-out;
     background: $white;
@@ -261,7 +275,7 @@
 
     .narrow-screen-menu {
       position: fixed;
-      top: 64px;
+      top: 65px;
       bottom: 0;
       left: 0;
       right: 0;
@@ -274,16 +288,6 @@
         height: 0;
         overflow: hidden;
         transition: opacity 0.2s, height 0s linear 0.2s;
-
-        .nav-links {
-          a {
-            transform: translateY(8px);
-          }
-        }
-      }
-
-      .nav-links {
-        height: 100%;
       }
     }
   }