Updated code to allow sidenav expand on click

GSA · Jan 9, 2025 · 168d93a · 168d93a
1 parent 7534de0
commit 168d93a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 34 deletions.
diff --git a/app/assets/javascripts/sidenav.js b/app/assets/javascripts/sidenav.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const sidenavItems = document.querySelectorAll('.usa-sidenav__item > .parent-link');
+
+    sidenavItems.forEach((link) => {
+      const parentItem = link.parentElement;
+      const hasChildren = parentItem.querySelector('.usa-sidenav__sublist');
+      const currentUrl = window.location.pathname;
+
+      if (
+        link.getAttribute('href') === currentUrl ||
+        currentUrl.startsWith(link.getAttribute('href'))
+      ) {
+        parentItem.classList.add('open');
+        link.setAttribute('aria-expanded', 'true');
+      }
+
+      link.addEventListener('click', (event) => {
+        if (hasChildren) {
+          event.preventDefault();
+
+          const isOpen = parentItem.classList.contains('open');
+
+          document.querySelectorAll('.usa-sidenav__item.open').forEach((item) => {
+            if (item !== parentItem) {
+              item.classList.remove('open');
+              item.querySelector('.parent-link').setAttribute('aria-expanded', 'false');
+            }
+          });
+
+          if (!isOpen) {
+            parentItem.classList.add('open');
+            link.setAttribute('aria-expanded', 'true');
+          } else {
+            parentItem.classList.remove('open');
+            link.setAttribute('aria-expanded', 'false');
+          }
+
+          window.location.href = link.getAttribute('href');
+        }
+      });
+    });
+  });
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -915,18 +915,18 @@ li.linked-card:hover svg,
 }
 
 .usa-sidenav__sublist {
-  display: none;
+  display: none; /* Default: hidden */
 }
 
-.usa-sidenav__item:hover .usa-sidenav__sublist,
-.usa-sidenav__item:focus-within .usa-sidenav__sublist {
-  display: block;
+.usa-sidenav__item.open .usa-sidenav__sublist {
+  display: block; /* Show sublist when the parent has the 'open' class */
 }
 
-.usa-sidenav__item a {
-  display: block;
+.usa-sidenav__sublist .bold {
+  font-weight: bold;
 }
 
+
 .icon-list {
   display: flex;
   width: 24px;

diff --git a/app/main/views/sub_navigation_dictionaries.py b/app/main/views/sub_navigation_dictionaries.py
@@ -93,20 +93,6 @@ def about_notify_nav():
                 {
                     "name": "Why text messaging",
                     "link": "main.why_text_messaging",
-                    "sub_sub_navigation_items": [
-                        {
-                            "name": "Reach people using a common method",
-                            "link": "main.why_text_messaging#reach-people-using-a-common-method",
-                        },
-                        {
-                            "name": "Improve customer experience",
-                            "link": "main.why_text_messaging#improve-customer-experience",
-                        },
-                        {
-                            "name": "What texting is best for",
-                            "link": "main.why_text_messaging#what-texting-is-best-for",
-                        },
-                    ],
                 },
                 {
                     "name": "Security",

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -56,35 +56,28 @@
                         {% for item in navigation_links %}
                           <li class="usa-sidenav__item">
                             <a href="{{ url_for(item.link) }}"
-                              class="parent-link {% if item['link'] == request.endpoint %} usa-current {% endif %}"
-                              aria-haspopup="true" aria-expanded="false">
+                               class="parent-link {% if request.endpoint.startswith(item['link']) or item.sub_navigation_items | selectattr('link', 'equalto', request.endpoint) | list | length > 0 %} usa-current {% endif %}"
+                               aria-haspopup="true"
+                               aria-expanded="{{ 'true' if request.endpoint.startswith(item['link']) else 'false' }}">
                               {{ item.name }}
                             </a>
                             {% if item.sub_navigation_items %}
                               <ul class="usa-sidenav__sublist" role="menu">
                                 {% for sub_item in item.sub_navigation_items %}
                                   <li role="menuitem">
-                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">
+                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}"
+                                       class="{% if request.endpoint == sub_item['link'] %}usa-current bold{% endif %}">
                                       {{ sub_item.name }}
                                     </a>
-                                    {% if sub_item.sub_sub_navigation_items %}
-                                      <ul class="usa-sidenav__sublist usa-sidenav__sub-sublist" role="menu">
-                                        {% for sub_sub_item in sub_item.sub_sub_navigation_items %}
-                                          <li role="menuitem">
-                                            <a href="{{ url_for(sub_sub_item.link.split('#')[0]) }}#{{ sub_sub_item.link.split('#')[1] }}">
-                                              {{ sub_sub_item.name }}
-                                            </a>
-                                          </li>
-                                        {% endfor %}
-                                      </ul>
-                                    {% endif %}
                                   </li>
                                 {% endfor %}
                               </ul>
                             {% endif %}
                           </li>
                         {% endfor %}
                       </ul>
+
+
                     </nav>
                   </div>
                   <div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">

diff --git a/gulpfile.js b/gulpfile.js
@@ -81,6 +81,8 @@ const javascripts = () => {
     paths.src + 'javascripts/main.js',
     paths.src + 'javascripts/totalMessagesChart.js',
     paths.src + 'javascripts/activityChart.js',
+    paths.src + 'javascripts/sidenav.js',
+
   ])
     .pipe(plugins.prettyerror())
     .pipe(