From 727f79980d273575cda913811902e97178d641e9 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Mon, 26 Feb 2024 23:27:32 -0800
Subject: [PATCH] added chevron

---
 .../fragments/prototype_nav_links_mobile.html     |  5 ++++-
 source/sass/components/primary-nav.scss           |  3 +++
 tailwind-plugins/site-nav.js                      | 15 +++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

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 985432da3df..18dea902265 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,10 @@
 <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-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>
+        <button class="tw-primary-nav tw-primary-nav-select 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 %>
+            <span class="tw-chevron"></span>
+        </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">
diff --git a/source/sass/components/primary-nav.scss b/source/sass/components/primary-nav.scss
index 41539d5a497..f62b2cfc97c 100644
--- a/source/sass/components/primary-nav.scss
+++ b/source/sass/components/primary-nav.scss
@@ -154,6 +154,9 @@
 
   .narrow-screen-menu-container .nav-links {
     .nav-item-wrapper {
+      border-left-width: 4px;
+      border-left-color: transparent;
+
       &.active {
         border-left: 4px $black solid;
       }
diff --git a/tailwind-plugins/site-nav.js b/tailwind-plugins/site-nav.js
index 710ee0a7338..62ab9e4beba 100644
--- a/tailwind-plugins/site-nav.js
+++ b/tailwind-plugins/site-nav.js
@@ -46,6 +46,7 @@ function narrowPrimaryNavComponents(theme) {
   return {
     ".narrow-screen-menu-container": {
       ".primary-nav": {
+        position: "relative",
         color: theme("colors.black"),
         fontFamily: theme("fontFamily.sans"),
         fontSize: theme("fontSize.lg"),
@@ -56,6 +57,20 @@ function narrowPrimaryNavComponents(theme) {
         "&:hover, &:focus, &:focus-visible, &:focus-within, &:active": {
           textDecoration: "none",
         },
+        ".chevron": {
+          position: "absolute",
+          right: 0,
+          width: "20px",
+          height: "20px",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: `right 0 top 50%`,
+          backgroundImage: 'url("../_images/glyphs/down-chevron.svg")',
+          backgroundSize: `cover`,
+          transition: "transform 0.15s",
+        },
+        "&[aria-expanded='true'] .chevron": {
+          transform: "rotate(180deg)",
+        },
       },
     },
   };