Handle CLS issue on localnav: mobile redesign (#3253)

* Check for localnav * Moving getGnanSource to utils * Awaiting gnav source * Adding lanalog when there is mismatch with content and name * Lint fixes * Changing height of localnav
adobecom · Nov 26, 2024 · ab1ff60 · ab1ff60
1 parent b96cb26
commit ab1ff60
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -997,7 +997,7 @@ header + .feds-localnav {
 
 .feds-localnav-title {
   width: 100%;
-  height: 53px;
+  height: 40px;
   font-size: 16px;
   font-weight: 700;
   border: 0;

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -5,6 +5,7 @@ import {
   loadIms,
   decorateLinks,
   loadScript,
+  getGnavSource,
 } from '../../utils/utils.js';
 import {
   closeAllDropdowns,
@@ -378,7 +379,12 @@ class Gnav {
     if (this.elements.localNav || !this.newMobileNav || isDesktop.matches) {
       localNavItems[0].querySelector('a').textContent = title.trim();
     } else {
-      const localNav = document.querySelector('.feds-localnav');
+      let localNav = document.querySelector('.feds-localnav');
+      if (!localNav) {
+        lanaLog({ message: 'GNAV: Localnav does not include \'localnav\' in its name.', tags: 'errorType=info,module=gnav' });
+        localNav = toFragment`<div class="feds-localnav"/>`;
+        this.block.after(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');
@@ -1174,19 +1180,9 @@ class Gnav {
   };
 }
 
-const getSource = async () => {
-  const { locale, dynamicNavKey } = getConfig();
-  let url = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
-  if (dynamicNavKey) {
-    const { default: dynamicNav } = await import('../../features/dynamic-navigation/dynamic-navigation.js');
-    url = dynamicNav(url, dynamicNavKey);
-  }
-  return url;
-};
-
 export default async function init(block) {
   const { mep } = getConfig();
-  const sourceUrl = await getSource();
+  const sourceUrl = await getGnavSource();
   const newMobileNav = getMetadata('mobile-gnav-v2') !== 'false';
   const [url, hash = ''] = sourceUrl.split('#');
   if (hash === '_noActiveItem') {

diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -725,7 +725,7 @@ header.global-navigation a {
 }
 
 .feds-localnav {
-  height: 53px;
+  height: 40px;
 }
 
 @media (min-width: 900px) {

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -751,7 +751,17 @@ function decorateDefaults(el) {
   });
 }
 
-function decorateHeader() {
+export async function getGnavSource() {
+  const { locale, dynamicNavKey } = getConfig();
+  let url = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
+  if (dynamicNavKey) {
+    const { default: dynamicNav } = await import('../features/dynamic-navigation/dynamic-navigation.js');
+    url = dynamicNav(url, dynamicNavKey);
+  }
+  return url;
+}
+
+async function decorateHeader() {
   const breadcrumbs = document.querySelector('.breadcrumbs');
   breadcrumbs?.remove();
   const header = document.querySelector('header');
@@ -772,7 +782,8 @@ 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') {
+  const gnavSource = await getGnavSource();
+  if (gnavSource.split('/').pop().match('localnav') && getMetadata('mobile-gnav-v2') !== 'false') {
     // Preserving space to avoid CLS issue
     const localNavWrapper = createTag('div', { class: 'feds-localnav' });
     header.after(localNavWrapper);