Highlight expanded navigation menu on mobile

libs/blocks/global-navigation/global-navigation.css

@@ -146,6 +146,27 @@ header.global-navigation {
   border-bottom: 1px solid var(--feds-borderColor-link--light);
 }
 
+/* Item with active dropdown */
+.feds-dropdown--active {
+  position: relative;
+}
+
+.feds-dropdown--active::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  background: var(--feds-color-link--light);
+  content: "";
+  z-index: 1;
+}
+
+[dir = "rtl"] .feds-dropdown--active::before {
+  right: 0;
+  left: initial;
+}
+
 .feds-popup .feds-navLink:hover,
 .feds-popup .feds-navLink:focus {
   background-color: var(--feds-background-link--hover--light);
@@ -369,6 +390,11 @@ header.global-navigation {
     display: flex;
   }
 
+  /* Item with active dropdown */
+  .feds-dropdown--active::before {
+    content: none;
+  }
+
   /* Popup */
   .feds-popup {
     position: absolute;

libs/blocks/global-navigation/global-navigation.js

@@ -415,6 +415,7 @@ class Gnav {
 
     const toggleClick = async () => {
       if (this.el.classList.contains(CONFIG.selectors.isOpen)) {
+        closeAllDropdowns();
         this.el.classList.remove(CONFIG.selectors.isOpen);
         this.elements.curtain.classList.remove(CONFIG.selectors.isOpen);
         if (this.blocks?.search?.instance) {
@@ -561,7 +562,10 @@ class Gnav {
           <div class="feds-navItem${isSectionMenu ? ' feds-navItem--section' : ''}">
             ${dropdownTrigger}
           </div>`;
-        dropdownTrigger.addEventListener('click', (e) => trigger({ element: dropdownTrigger, event: e }));
+        dropdownTrigger.addEventListener('click', (e) => {
+          const opened = trigger({ element: dropdownTrigger, event: e });
+          if (opened) triggerTemplate.classList.add(selectors.activeDropdown.replace('.', ''));
+        });
         delayDropdownDecoration(triggerTemplate);
         return triggerTemplate;
       }

libs/blocks/global-navigation/utilities/menu/menu.js

@@ -6,6 +6,7 @@ import {
   yieldToMain,
   getFedsPlaceholderConfig,
   logErrorFor,
+  selectors,
 } from '../utilities.js';
 import { decorateLinks } from '../../../../utils/utils.js';
 import { replaceText } from '../../../../features/placeholders.js';
@@ -36,6 +37,16 @@ const decorateHeadline = (elem) => {
 
     const currentState = headline.getAttribute('aria-expanded');
     headline.setAttribute('aria-expanded', currentState === 'false');
+
+    const activeClass = selectors.activeDropdown.replace('.', '');
+    if (currentState === 'true') {
+      headline.closest(selectors.navItem)?.classList.add(activeClass);
+    } else {
+      [...document.querySelectorAll(selectors.activeDropdown)]
+        .forEach((section) => section.classList.remove(activeClass));
+      headline.closest(`${selectors.menuSection}, ${selectors.menuColumn}`)?.classList
+        .toggle(activeClass, currentState === 'false');
+    }
   });
 
   // Since heading is turned into a div, it can be safely removed

libs/blocks/global-navigation/utilities/utilities.js

@@ -6,6 +6,10 @@ export const selectors = {
   globalNav: '.global-navigation',
   curtain: '.feds-curtain',
   navLink: '.feds-navLink',
+  navItem: '.feds-navItem',
+  activeDropdown: '.feds-dropdown--active',
+  menuSection: '.feds-menu-section',
+  menuColumn: '.feds-menu-column',
 };
 
 export function toFragment(htmlStrings, ...values) {
@@ -129,6 +133,9 @@ export function closeAllDropdowns({ e } = {}) {
     }
   });
 
+  [...document.querySelectorAll(selectors.activeDropdown)]
+    .forEach((el) => el.classList.remove(selectors.activeDropdown.replace('.', '')));
+
   document.querySelector(selectors.curtain)?.classList.remove('is-open');
 }
 

test/blocks/global-navigation/global-navigation.test.js

@@ -185,6 +185,7 @@ describe('global navigation', () => {
         navLink.click();
 
         expect(navLink.getAttribute('aria-expanded')).to.equal('true');
+        expect(navItem.classList.contains('feds-dropdown--active')).to.equal(true);
         expect(isElementVisible(popup)).to.equal(true);
         expect(navLink.getAttribute('daa-lh')).to.equal('header|Close');
       });
@@ -200,11 +201,13 @@ describe('global navigation', () => {
 
         expect(navLink.getAttribute('aria-expanded')).to.equal('true');
         expect(isElementVisible(popup)).to.equal(true);
+        expect(navItem.classList.contains('feds-dropdown--active')).to.equal(true);
 
         navLink.click();
 
         expect(navLink.getAttribute('aria-expanded')).to.equal('false');
         expect(isElementVisible(popup)).to.equal(false);
+        expect(navItem.classList.contains('feds-dropdown--active')).to.equal(false);
       });
 
       it(