subnav

app/assets/javascripts/subNav.js

@@ -0,0 +1,29 @@
+(function(window) {
+    "use strict";
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const sideNavLinks = document.querySelectorAll('.usa-sidenav__item');
+        const currentURL = window.location.pathname;
+
+        sideNavLinks.forEach(link => {
+            const sublist = link.querySelector('.usa-sidenav__sublist');
+            const parentLink = link.querySelector('a');
+
+            const isMatch = parentLink && sublist && currentURL === parentLink.getAttribute('href');
+            if (isMatch) {
+                sublist.classList.replace('display-none', 'display-block');
+            }
+
+            link.addEventListener('click', function(event) {
+                if (sublist && event.target === parentLink) {
+                    event.preventDefault();
+
+                    sublist.classList.toggle('display-none');
+                    sublist.classList.toggle('display-block');
+
+                    setTimeout(() => window.location.href = parentLink.href, 100);
+                }
+            });
+        });
+    });
+})(window);

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -831,13 +831,14 @@ $do-dont-top-bar-width: 1;
    transition: transform 0.3s ease, background-color 0.3s ease,
 }
 
-li.linked-card > div:first-child {
+li.linked-card:hover > div:first-child:hover {
    border-color: #005ea2;
 }
 
 li.linked-card:hover h4,
 li.linked-card:hover p,
-.guidance_card_img{
+li.linked-card:hover svg,
+.guidance_card_img:hover{
    color: #005ea2;
 }
 

app/templates/base.html

@@ -59,7 +59,7 @@
                           <li class="usa-sidenav__item">
                             <a class="{% if item['link'] == request.endpoint %} usa-current {% endif %}" href="{{ url_for(item.link) }}">{{ item.name }}</a>
                             {% if item.sub_navigation_items %}
-                              <ul class="usa-sidenav__sublist">
+                              <ul class="usa-sidenav__sublist display-none">
                                 {% for sub_item in item.sub_navigation_items %}
                                   <li>
                                     <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">{{ sub_item.name }}</a>

app/templates/components/guidance/cards.html

@@ -10,7 +10,7 @@
       {% if item.card_heading %}
       <div class="usa-card__header">
         {% if item.link %}
-        <a href="{{ item.link }}" class="guidance_link">
+        <a href="{{ item.link }}">
           {% endif %}
           <h4
             class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">

gulpfile.js

@@ -81,6 +81,7 @@ const javascripts = () => {
     paths.src + 'javascripts/main.js',
     paths.src + 'javascripts/totalMessagesChart.js',
     paths.src + 'javascripts/activityChart.js',
+    paths.src + 'javascripts/subNav.js',
   ])
     .pipe(plugins.prettyerror())
     .pipe(