Skip to content

Commit

Permalink
MWPW-146129 [Original: adobecom#2123] App Launcher overlaps the menu …
Browse files Browse the repository at this point in the history
…in Unav in the devices (adobecom#2184)

* Closes the global nav expanded wrapper in non desktop viewports when the user interacts with the universal nav (Notifications, app switcher, and profile/sign in button)

* We no longer use element.click

* made toggleMenuMobile a method of the Gnav class

* Extracted the toggle expanded check into its own function

* a little cleanup
  • Loading branch information
sharmrj authored and mokimo committed Apr 30, 2024
1 parent db4e6de commit 1be1e96
Showing 1 changed file with 17 additions and 7 deletions.
24 changes: 17 additions & 7 deletions libs/blocks/global-navigation/global-navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,9 @@ class Gnav {
if (this.useUniversalNav) {
delete this.blocks.profile;
this.blocks.universalNav = toFragment`<div class="feds-utilities"></div>`;
this.blocks.universalNav.addEventListener('click', () => {
if (this.isToggleExpanded()) this.toggleMenuMobile();
}, true);
}
};

Expand Down Expand Up @@ -615,6 +618,18 @@ class Gnav {
});
};

isToggleExpanded = () => this.elements.mobileToggle?.getAttribute('aria-expanded') === 'true';

toggleMenuMobile = () => {
const toggle = this.elements.mobileToggle;
const isExpanded = this.isToggleExpanded();
toggle?.setAttribute('aria-expanded', !isExpanded);
this.elements.navWrapper?.classList?.toggle('feds-nav-wrapper--expanded', !isExpanded);
closeAllDropdowns();
setCurtainState(!isExpanded);
toggle?.setAttribute('daa-ll', `hamburgermenu|${isExpanded ? 'open' : 'close'}`);
};

decorateToggle = () => {
if (!this.mainNavItemCount) return '';

Expand All @@ -638,20 +653,15 @@ class Gnav {
};

const onToggleClick = async () => {
const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', !isExpanded);
this.elements.navWrapper.classList.toggle('feds-nav-wrapper--expanded', !isExpanded);
closeAllDropdowns();
setCurtainState(!isExpanded);
toggle.setAttribute('daa-ll', `hamburgermenu|${isExpanded ? 'open' : 'close'}`);
this.toggleMenuMobile();

if (this.blocks?.search?.instance) {
this.blocks.search.instance.clearSearchForm();
} else {
await this.loadSearch();
}

if (isExpanded) setHamburgerPadding();
if (this.isToggleExpanded()) setHamburgerPadding();
};

toggle.addEventListener('click', () => logErrorFor(onToggleClick, 'Toggle click failed', 'errorType=error,module=gnav'));
Expand Down

0 comments on commit 1be1e96

Please sign in to comment.