Handling CLS issue for localnav - mobile gnav redesign

libs/blocks/global-navigation/global-navigation.css

@@ -991,6 +991,10 @@ header + .feds-localnav {
   z-index: 2;
 }
 
+.feds-localnav a {
+  text-decoration: unset;
+}
+
 .feds-localnav-title {
   width: 100%;
   height: 53px;
@@ -1011,6 +1015,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;
 }

libs/blocks/global-navigation/global-navigation.js

@@ -39,7 +39,6 @@ import {
   darkIcons,
   setDisableAEDState,
   getDisableAEDState,
-  newNavEnabled,
   animateInSequence,
   transformTemplateToMobile,
 } from './utilities/utilities.js';
@@ -281,7 +280,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(',') || [];
@@ -297,8 +296,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())
@@ -367,26 +370,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);
@@ -396,7 +399,6 @@ class Gnav {
         localNav.classList.toggle('active');
       });
       this.elements.localNav = localNav;
-      this.block.after(localNav);
     }
   };
 
@@ -737,7 +739,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()) {
@@ -1003,14 +1005,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);
@@ -1054,7 +1056,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);
           }
@@ -1184,6 +1186,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();
@@ -1199,8 +1202,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');

libs/blocks/global-navigation/utilities/utilities.js

 return originalContent; 
 return originalContent; 
@@ -235,7 +235,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('.', '');

libs/navigation/bootstrapper.js

@@ -26,6 +26,7 @@ export default async function bootstrapBlock(miloLibs, 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;
@@ -37,6 +38,10 @@ export default async function bootstrapBlock(miloLibs, 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));

libs/navigation/navigation.js

@@ -60,6 +60,7 @@ export default async function loadBlock(configs, customLib) {
     locale = '',
     theme,
     stageDomainsMap = {},
+    allowedOrigins = [],
   } = configs || {};
   const branch = new URLSearchParams(window.location.search).get('navbranch');
   const miloLibs = branch ? `https://${branch}--milo--adobecom.aem.page` : customLib || envMap[env];
@@ -77,14 +78,15 @@ export default async function loadBlock(configs, customLib) {
 
   const paramConfigs = getParamsConfigs(configs, miloLibs);
   const clientConfig = {
+    theme,
+    allowedOrigins,
     clientEnv: env,
+    ...paramConfigs,
     origin: `https://main--federal--adobecom.aem.${env === 'prod' ? 'live' : 'page'}`,
     miloLibs: `${miloLibs}/libs`,
     pathname: `/${locale}`,
     locales: configs.locales || locales,
     contentRoot: authoringPath || footer.authoringPath,
-    theme,
-    ...paramConfigs,
     stageDomainsMap: getStageDomainsMap(stageDomainsMap),
   };
   setConfig(clientConfig);
@@ -100,6 +102,8 @@ export default async function loadBlock(configs, customLib) {
             layout: configBlock.layout,
             noBorder: configBlock.noBorder,
             jarvis: configBlock.jarvis,
+            isLocalNav: configBlock.isLocalNav,
+            useNewMobileNav: configBlock.useNewMobileNav,
           }),
         });
         configBlock.onReady?.();

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);

libs/utils/utils.js

@@ -772,6 +772,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');