diff --git a/app/assets/javascripts/sidenav.js b/app/assets/javascripts/sidenav.js new file mode 100644 index 0000000000..289b0a03ae --- /dev/null +++ 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 index afe67dd145..59bc5e12f3 100644 --- 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 index 0e896b64ec..885e200ef6 100644 --- 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 index 0348832bd2..1d2778a9ee 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -56,28 +56,19 @@ {% for item in navigation_links %}
  • {% if item.sub_navigation_items %} @@ -85,6 +76,8 @@
  • {% endfor %} + +
    diff --git a/gulpfile.js b/gulpfile.js index 068643e749..e1bf8ba5c4 100644 --- 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(