Handling desktop gnav sticky

adobecom · Jan 8, 2025 · c96dcdc · c96dcdc
1 parent 3d4ba56
commit c96dcdc
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/libs/blocks/global-navigation/features/aside/aside.js b/libs/blocks/global-navigation/features/aside/aside.js
@@ -2,9 +2,10 @@ import { loadBlock, decorateAutoBlock } from '../../../../utils/utils.js';
 import { toFragment, lanaLog } from '../../utilities/utilities.js';
 import { processTrackingLabels } from '../../../../martech/attributes.js';
 
-export default async function decorateAside({ fedsPromoWrapper, promoPath } = {}) {
+export default async function decorateAside({ headerElem, fedsPromoWrapper, promoPath } = {}) {
   const onError = () => {
     fedsPromoWrapper.remove();
+    headerElem?.classList.remove('has-promo');
     lanaLog({ message: 'Gnav Promo fragment not replaced, potential CLS' });
     return '';
   };

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -937,16 +937,16 @@ class Gnav {
   decorateAside = async () => {
     this.elements.aside = '';
     const promoPath = getMetadata('gnav-promo-source');
+    const fedsPromoWrapper = document.querySelector('.feds-promo-aside-wrapper');
+
     if (!promoPath) {
-      const fedsPromoWrapper = document.querySelector('.feds-promo-aside-wrapper');
       fedsPromoWrapper?.remove();
       return this.elements.aside;
     }
 
     const { default: decorate } = await import('./features/aside/aside.js');
     if (!decorate) return this.elements.aside;
-    const fedsPromoWrapper = document.querySelector('.feds-promo-aside-wrapper');
-    this.elements.aside = await decorate({ localNavElem: this.elements.localNav, fedsPromoWrapper, promoPath });
+    this.elements.aside = await decorate({ headerElem: this.block, fedsPromoWrapper, promoPath });
     fedsPromoWrapper.append(this.elements.aside);
   };
 

diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -745,6 +745,11 @@ header.global-navigation + .feds-localnav {
   header.global-navigation + .feds-localnav {
     display: none;
   }
+
+  header.global-navigation.has-promo {
+    height: auto;
+    top: var(--global-height-navPromo);
+  }
 }
 
 .breadcrumbs {

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -815,6 +815,7 @@ async function decorateHeader() {
   if (promo?.length) {
     const fedsPromoWrapper = createTag('div', { class: 'feds-promo-aside-wrapper' });
     header.before(fedsPromoWrapper);
+    header.classList.add('has-promo');
   }
 }