Automatically expand menu section containing the active link

This commit is contained in:
Jeremy Stretch 2024-01-11 10:20:11 -05:00
parent 77dbf5c3f1
commit feda63d6a7
3 changed files with 7 additions and 7 deletions

Binary file not shown.

Binary file not shown.

View File

@ -205,22 +205,22 @@ class SideNav {
* @param action Expand or Collapse * @param action Expand or Collapse
*/ */
private activateLink(link: HTMLDivElement, action: 'expand' | 'collapse'): void { private activateLink(link: HTMLDivElement, action: 'expand' | 'collapse'): void {
// Find the closest .collapse element, which should contain `link`. // Find the closest .dropdown-menu element, which should contain `link`.
const collapse = link.closest('.collapse') as Nullable<HTMLDivElement>; const dropdownMenu = link.closest('.dropdown-menu') as Nullable<HTMLDivElement>;
if (isElement(collapse)) { if (isElement(dropdownMenu)) {
// Find the closest `.nav-link`, which should be adjacent to the `.collapse` element. // Find the closest `.nav-link`, which should be adjacent to the `.dropdown-menu` element.
const groupLink = collapse.parentElement?.querySelector('.nav-link'); const groupLink = dropdownMenu.parentElement?.querySelector('.nav-link');
if (isElement(groupLink)) { if (isElement(groupLink)) {
groupLink.classList.add('active'); groupLink.classList.add('active');
switch (action) { switch (action) {
case 'expand': case 'expand':
groupLink.setAttribute('aria-expanded', 'true'); groupLink.setAttribute('aria-expanded', 'true');
collapse.classList.add('show'); dropdownMenu.classList.add('show');
link.classList.add('active'); link.classList.add('active');
break; break;
case 'collapse': case 'collapse':
groupLink.setAttribute('aria-expanded', 'false'); groupLink.setAttribute('aria-expanded', 'false');
collapse.classList.remove('show'); dropdownMenu.classList.remove('show');
link.classList.remove('active'); link.classList.remove('active');
break; break;
} }