Adding disable-scroll when localnav is opened

adobecom · Jan 7, 2025 · 0d197e7 · 0d197e7
1 parent 378606d
commit 0d197e7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -411,12 +411,14 @@ class Gnav {
 
     localNav.querySelector('.feds-localnav-title').addEventListener('click', () => {
       localNav.classList.toggle('feds-localnav--active');
+      document.body.classList.toggle('disable-scroll');
       const isActive = localNav.classList.contains('feds-localnav--active');
       localNav.querySelector('.feds-localnav-title').setAttribute('aria-expanded', isActive);
     });
 
     localNav.querySelector('.feds-localnav-curtain').addEventListener('click', (e) => {
       trigger({ element: e.currentTarget, event: e, type: 'localNav-curtain' });
+      document.body.classList.remove('disable-scroll');
     });
     this.elements.localNav = localNav;
     localNavItems[0].querySelector('a').textContent = title.trim();

diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js
@@ -225,7 +225,12 @@ export function setActiveDropdown(elem, type) {
   const resetActiveDropdown = () => {
     [...document.querySelectorAll(selectors.activeDropdown)]
       .forEach((activeDropdown) => activeDropdown.classList.remove(activeClass));
-    if (!type || type === 'localNav-curtain') {
+    // Close the localnav if clicked element is not localnav item
+    if ((!type || type === 'localNav-curtain') ) {
+      // Remove disable-scroll set by localnav opening
+      if (document.querySelector('.feds-localnav--active') && !document.querySelector('.feds-toggle[aria-expanded="true"]')) {
+        document.body.classList.remove('disable-scroll');
+      }
       [...document.querySelectorAll(activeLocalNav)]
         .forEach((activeDropdown) => activeDropdown.classList.remove('feds-localnav--active'));
     }