darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-09 06:33:52 -05:00
Code Issues Packages Projects Releases Wiki Activity

adjusted subnav to hover

Browse Source
This commit is contained in:
Beverly Nguyen
2024-10-29 20:19:51 -07:00
parent fd68a918e7
commit 02e3efd105
3 changed files with 20 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/javascripts/subNav.js
View File

@@ -1,29 +0,0 @@
(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, 50);
}
});
});
});
})(window);

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

@@ -884,3 +884,16 @@ li.linked-card:hover svg,
-webkit-mask-size: 1.75ex 1.75ex;
mask-size: 1.75ex 1.75ex;
}
.usa-sidenav__sublist {
display: none;
}
.usa-sidenav__item:hover .usa-sidenav__sublist,
.usa-sidenav__item:focus-within .usa-sidenav__sublist {
display: block;
}
.usa-sidenav__item a {
display: block;
}

10
app/templates/base.html
View File

@@ -57,11 +57,15 @@
<ul class="usa-sidenav">
{% for item in navigation_links %}
<li class="usa-sidenav__item">
<a class="{% if item['link'] == request.endpoint %} usa-current {% endif %}" href="{{ url_for(item.link) }}">{{ item.name }}</a>
<a href="{{ url_for(item.link) }}"
class="parent-link {% if item['link'] == request.endpoint %} usa-current {% endif %}"
aria-haspopup="true" aria-expanded="false">
{{ item.name }}
</a>
{% if item.sub_navigation_items %}
<ul class="usa-sidenav__sublist display-none">
<ul class="usa-sidenav__sublist" role="menu">
{% for sub_item in item.sub_navigation_items %}
<li>
<li role="menuitem">
<a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">{{ sub_item.name }}</a>
</li>
{% endfor %}