Handling CLS issue for localnav - mobile gnav redesign (#3198)

* Handling CLS issue by preserving space for localnav * Adding localnav config * Adding overview text from placeholder * Adding meta data check for new mobile gnav feature flag * Lint fix * Adding localnav only when mobile gnav v2 is true
adobecom · Jan 9, 2025 · 6450764 · 6450764
1 parent de9fe47
commit 6450764
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 26 deletions.
diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -1002,6 +1002,10 @@ header + .feds-localnav {
   z-index: 2;
 }
 
+.feds-localnav a {
+  text-decoration: unset;
+}
+
 .feds-localnav-title {
   width: 100%;
   height: 53px;
@@ -1022,6 +1026,10 @@ header + .feds-localnav {
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
+.feds-localnav-items .feds-navItem:first-child {
+  font-weight: 600;
+}
+
 .feds-localnav-items .feds-navLink {
   border: 0;
 }

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -38,7 +38,6 @@ import {
   darkIcons,
   setDisableAEDState,
   getDisableAEDState,
-  newNavEnabled,
   animateInSequence,
   transformTemplateToMobile,
 } from './utilities/utilities.js';
@@ -288,7 +287,7 @@ const convertToPascalCase = (str) => str
   .join(' ');
 
 class Gnav {
-  constructor({ content, block } = {}) {
+  constructor({ content, block, newMobileNav } = {}) {
     this.content = content;
     this.block = block;
     this.customLinks = getConfig()?.customLinks?.split(',') || [];
@@ -304,8 +303,12 @@ class Gnav {
 
     this.setupUniversalNav();
     this.elements = {};
+    this.newMobileNav = newMobileNav;
   }
 
+  // eslint-disable-next-line no-return-assign
+  getOriginalTitle = (localNavItems) => this.originalTitle ||= localNavItems[0].querySelector('a').textContent.split('|');
+
   setupUniversalNav = () => {
     const meta = getMetadata('universal-nav')?.toLowerCase();
     this.universalNavComponents = meta?.split(',').map((option) => option.trim())
@@ -383,26 +386,26 @@ class Gnav {
     `;
   };
 
-  decorateLocalNav = () => {
+  decorateLocalNav = async () => {
     const localNavItems = this.elements.navWrapper.querySelector('.feds-nav').querySelectorAll('.feds-navItem:not(.feds-navItem--section)');
-    const [title, navTitle = ''] = localNavItems[0].querySelector('a').textContent.split('|');
-    if (this.elements.localNav || !newNavEnabled || !this.isLocalNav() || isDesktop.matches) {
+    const [title, navTitle = ''] = this.getOriginalTitle(localNavItems);
+
+    if (this.elements.localNav || !this.newMobileNav || !this.isLocalNav() || isDesktop.matches) {
       localNavItems[0].querySelector('a').textContent = title.trim();
     } else {
-      const localNav = toFragment`
-      <div class="feds-localnav">
-        <button class="feds-navLink--hoverCaret feds-localnav-title"></button>
-        <div class="feds-localnav-items"></div>
-      </div>`;
+      const localNav = document.querySelector('.feds-localnav');
+      localNav.append(toFragment`<button class="feds-navLink--hoverCaret feds-localnav-title"></button>`, toFragment` <div class="feds-localnav-items"></div>`);
 
       const itemWrapper = localNav.querySelector('.feds-localnav-items');
+      const titleLabel = await replaceKey('overview', getFedsPlaceholderConfig());
+
       localNavItems.forEach((elem, idx) => {
         const clonedItem = elem.cloneNode(true);
         const link = clonedItem.querySelector('a');
 
         if (idx === 0) {
           localNav.querySelector('.feds-localnav-title').innerText = title.trim();
-          link.textContent = navTitle.trim() || title.trim();
+          link.textContent = navTitle.trim() || titleLabel;
         }
 
         itemWrapper.appendChild(clonedItem);
@@ -412,7 +415,6 @@ class Gnav {
         localNav.classList.toggle('active');
       });
       this.elements.localNav = localNav;
-      this.block.after(localNav);
     }
   };
 
@@ -753,7 +755,7 @@ class Gnav {
   toggleMenuMobile = () => {
     const toggle = this.elements.mobileToggle;
     const isExpanded = this.isToggleExpanded();
-    if (!isExpanded && newNavEnabled) {
+    if (!isExpanded && this.newMobileNav) {
       const sections = document.querySelectorAll('header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink');
       animateInSequence(sections, 0.075);
       if (this.isLocalNav()) {
@@ -1019,14 +1021,14 @@ class Gnav {
           type: itemType,
         });
 
-        if (this.isLocalNav() && newNavEnabled) {
+        if (this.isLocalNav() && this.newMobileNav) {
           decorateLocalNavItems(item, template);
         }
 
         const popup = template.querySelector('.feds-popup');
         let originalContent = popup.innerHTML;
 
-        if (!isDesktop.matches && newNavEnabled && popup) {
+        if (!isDesktop.matches && this.newMobileNav && popup) {
           originalContent = transformTemplateToMobile(popup, item, this.isLocalNav());
           popup.querySelector('.close-icon')?.addEventListener('click', this.toggleMenuMobile);
           makeTabActive(popup);
@@ -1070,7 +1072,7 @@ class Gnav {
 
         // Toggle trigger's dropdown on click
         dropdownTrigger.addEventListener('click', (e) => {
-          if (!isDesktop.matches && newNavEnabled && isSectionMenu) {
+          if (!isDesktop.matches && this.newMobileNav && isSectionMenu) {
             const popup = dropdownTrigger.nextElementSibling;
             makeTabActive(popup);
           }
@@ -1200,6 +1202,7 @@ const getSource = async () => {
 export default async function init(block) {
   const { mep } = getConfig();
   const sourceUrl = await getSource();
+  const newMobileNav = getMetadata('mobile-gnav-v2') !== 'false';
   const [url, hash = ''] = sourceUrl.split('#');
   if (hash === '_noActiveItem') {
     setDisableAEDState();
@@ -1215,8 +1218,9 @@ export default async function init(block) {
   const gnav = new Gnav({
     content,
     block,
+    newMobileNav,
   });
-  if (newNavEnabled && !isDesktop.matches) block.classList.add('new-nav');
+  if (newMobileNav && !isDesktop.matches) block.classList.add('new-nav');
   await gnav.init();
   if (gnav.isLocalNav()) block.classList.add('local-nav');
   block.setAttribute('daa-im', 'true');

diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js
@@ -215,7 +215,6 @@ export function setCurtainState(state) {
 
 export const isDesktop = window.matchMedia('(min-width: 900px)');
 export const isTangentToViewport = window.matchMedia('(min-width: 900px) and (max-width: 1440px)');
-export const newNavEnabled = new URL(window.location.href).searchParams.get('newNav') === 'true';
 
 export function setActiveDropdown(elem) {
   const activeClass = selectors.activeDropdown.replace('.', '');

diff --git a/libs/navigation/bootstrapper.js b/libs/navigation/bootstrapper.js
@@ -23,6 +23,7 @@ export default async function bootstrapBlock(initBlock, blockConfig) {
     const metaTags = [
       { key: 'unavComponents', name: 'universal-nav' },
       { key: 'redirect', name: 'adobe-home-redirect' },
+      { key: 'useNewMobileNav', name: 'mobile-gnav-v2' },
     ];
     metaTags.forEach((tag) => {
       const { key } = tag;
@@ -34,6 +35,10 @@ export default async function bootstrapBlock(initBlock, blockConfig) {
         document.head.append(metaTag);
       }
     });
+    if (blockConfig.isLocalNav) {
+      const localNavWrapper = createTag('div', { class: 'feds-localnav' });
+      document.querySelector('header').after(localNavWrapper);
+    }
   }
 
   await initBlock(document.querySelector(targetEl));

diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
@@ -72,8 +72,8 @@ export default async function loadBlock(configs, customLib) {
     env = 'prod',
     locale = '',
     theme,
-    allowedOrigins = [],
     stageDomainsMap = {},
+    allowedOrigins = [],
   } = configs || {};
   if (!header && !footer) {
     // eslint-disable-next-line no-console
@@ -110,18 +110,18 @@ export default async function loadBlock(configs, customLib) {
   ]);
   const paramConfigs = getParamsConfigs(configs);
   const clientConfig = {
+    theme,
+    prodDomains,
     clientEnv: env,
-    origin: `https://main--federal--adobecom.aem.${env === 'prod' ? 'live' : 'page'}`,
-    miloLibs: `${miloLibs}/libs`,
+    standaloneGnav: true,
     pathname: `/${locale}`,
+    miloLibs: `${miloLibs}/libs`,
     locales: configs.locales || locales,
     contentRoot: authoringPath || footer.authoringPath,
-    theme,
-    ...paramConfigs,
-    prodDomains,
-    allowedOrigins: [...allowedOrigins, `https://main--federal--adobecom.aem.${env === 'prod' ? 'live' : 'page'}`],
-    standaloneGnav: true,
     stageDomainsMap: getStageDomainsMap(stageDomainsMap),
+    origin: `https://main--federal--adobecom.aem.${env === 'prod' ? 'live' : 'page'}`,
+    allowedOrigins: [...allowedOrigins, `https://main--federal--adobecom.aem.${env === 'prod' ? 'live' : 'page'}`],
+    ...paramConfigs,
   };
   setConfig(clientConfig);
   for await (const block of blockConfig) {
@@ -137,6 +137,8 @@ export default async function loadBlock(configs, customLib) {
             layout: configBlock.layout,
             noBorder: configBlock.noBorder,
             jarvis: configBlock.jarvis,
+            isLocalNav: configBlock.isLocalNav,
+            useNewMobileNav: configBlock.useNewMobileNav,
           });
         } else if (block.key === 'footer') {
           try {

diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -724,6 +724,10 @@ header.global-navigation a {
   text-decoration: unset;
 }
 
+.feds-localnav {
+  height: 53px;
+}
+
 @media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
     padding-bottom: var(--global-height-breadcrumbs);

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -794,6 +794,11 @@ function decorateHeader() {
   const dynamicNavActive = getMetadata('dynamic-nav') === 'on'
     && window.sessionStorage.getItem('gnavSource') !== null;
   if (!dynamicNavActive && (baseBreadcrumbs || breadcrumbs || autoBreadcrumbs)) header.classList.add('has-breadcrumbs');
+  if (getMetadata('is-localnav') === 'true' && getMetadata('mobile-gnav-v2') !== 'false') {
+    // Preserving space to avoid CLS issue
+    const localNavWrapper = createTag('div', { class: 'feds-localnav' });
+    header.after(localNavWrapper);
+  }
   if (breadcrumbs) header.append(breadcrumbs);
   const promo = getMetadata('gnav-promo-source');
   if (promo?.length) header.classList.add('has-promo');