MWPW-148278: Dynamic-Nav hide breadcrumbs (#2380)

* Adding feature to hide breadcrumbs when dynamic-nav is active * Moving logic for 'has-breadcrumbs' into utils.js to prevent CLS * Removing extraneous code from gnav since utils modifies breadcrumb functionality * Adding feature to hide breadcrumbs when dynamic-nav is active * Moving logic for 'has-breadcrumbs' into utils.js to prevent CLS * Removing extraneous code from gnav since utils modifies breadcrumb functionality
adobecom · Jun 11, 2024 · af819cd · af819cd
1 parent afe81dc
commit af819cd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -693,7 +693,9 @@ function decorateHeader() {
   const baseBreadcrumbs = getMetadata('breadcrumbs-base')?.length;
   const breadcrumbs = document.querySelector('.breadcrumbs');
   const autoBreadcrumbs = getMetadata('breadcrumbs-from-url') === 'on';
-  if (baseBreadcrumbs || breadcrumbs || autoBreadcrumbs) header.classList.add('has-breadcrumbs');
+  const dynamicNavActive = getMetadata('dynamic-nav') === 'on'
+    && window.sessionStorage.getItem('gnavSource') !== null;
+  if (!dynamicNavActive && (baseBreadcrumbs || breadcrumbs || autoBreadcrumbs)) header.classList.add('has-breadcrumbs');
   if (breadcrumbs) header.append(breadcrumbs);
   const promo = getMetadata('gnav-promo-source');
   if (promo?.length) header.classList.add('has-promo');

diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js
@@ -1437,4 +1437,19 @@ describe('global navigation', () => {
       ).to.be.true;
     });
   });
+
+  describe('Dynamic nav', () => {
+    describe('Breadcrumbs', () => {
+      it('should not decorate breadcrumbs when dynamic nav is active', async () => {
+        const dynamicNavOn = toFragment`<meta name="dynamic-nav" content="on">`;
+        document.head.append(dynamicNavOn);
+        document.body.replaceChildren(toFragment`<header class="global-navigation"></header>`);
+        window.sessionStorage.setItem('dynamicNavKey', 'milo');
+        window.sessionStorage.setItem('gnavSource', '/some-path');
+        await initGnav(document.body.querySelector('header'));
+        const breadcrumbs = document.querySelector('.feds-breadcrumbs');
+        expect(breadcrumbs).to.be.null;
+      });
+    });
+  });
 });