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

Updated code to allow sidenav expand on click

Browse Source
This commit is contained in:
alexjanousekGSA
2025-01-09 12:00:50 -04:00
parent 7534de06e3
commit 168d93a170
5 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/sidenav.js Normal file
View File

@@ -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');
}
});
});
});

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

@@ -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;

14
app/main/views/sub_navigation_dictionaries.py
View File

@@ -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",

21
app/templates/base.html
View File

@@ -56,28 +56,19 @@
{% 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>
@@ -85,6 +76,8 @@
</li>
{% endfor %}
</ul>
</nav>
</div>
<div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">

2
gulpfile.js
View File

@@ -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(