added chevron

MozillaFoundation · Feb 27, 2024 · 727f799 · 727f799
1 parent 64f99c4
commit 727f799
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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)",
+        },
       },
     },
   };