Localnav design and event listeners

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

@@ -987,28 +987,28 @@ header + .feds-localnav {
   display: block;
   top: 0;
   width: 100%;
-  background: #fff;
   left: 0;
   z-index: 2;
 }
 
 .feds-localnav-title {
   width: 100%;
-  height: 80px;
-  font-size: 22px;
-  font-weight: 600;
+  height: 53px;
+  font-size: 16px;
+  font-weight: 700;
   border: 0;
-  padding: 12px;
+  padding: 0 20px;
   text-align: justify;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
-  background-color: #fff;
+  background-color: #F8F8F8;
 }
 
 .feds-localnav-items {
-  background-color: #fff;
+  background: #F3F3F3;
   border-bottom: 1px solid #eee;
   display: none;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
 .feds-localnav-items .feds-navLink {
@@ -1017,14 +1017,53 @@ header + .feds-localnav {
 
 .feds-localnav.active .feds-localnav-items {
   display: block;
+  width: 100%;
+  position: absolute;
 }
 
-.feds-localnav .feds-localnav-items .feds-navLink {
+.feds-localnav.active .feds-localnav-items .feds-menu-items {
+  padding: 0;
   border-bottom: 0;
-  font-size: 16px;
+}
+
+.feds-localnav.active .feds-localnav-items .feds-menu-column > ul {
+  padding: 0;
+}
+
+.feds-localnav.active .feds-localnav-items .feds-menu-column > ul .feds-navLink {
+  padding-left: 38px;
+}
+
+.feds-localnav.active .feds-localnav-items .feds-menu-items .feds-navLink {
+  padding: 12px 56px;
+}
+
+.feds-localnav .feds-navLink[aria-expanded="true"] {
   font-weight: 600;
 }
 
+.feds-localnav .feds-localnav-items .feds-navLink {
+  border-bottom: 0;
+  font-size: 14px;
+  padding: 12px 20px;
+  background: #F3F3F3;
+}
+
+.feds-localnav .feds-localnav-items .feds-menu-headline {
+  background: #F3F3F3;
+  font-weight: 400;
+  border-bottom: 0;
+  padding: 12px 38px;
+}
+
+.feds-localnav .feds-localnav-items .feds-navItem--centered {
+  padding: 12px 20px;
+}
+
+.feds-localnav .feds-dropdown--active::before {
+  display: none;
+}
+
 .feds-localnav.active .feds-localnav-title::after {
   transform: rotateZ(-135deg);
 }

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

@@ -379,6 +379,7 @@ class Gnav {
       }
       itemWrapper.appendChild(elem.cloneNode(true));
     });
+
     localNav.querySelector('.feds-localnav-title').addEventListener('click', () => {
       if (localNav.classList.contains('active')) localNav.classList.remove('active');
       else localNav.classList.add('active');
@@ -400,6 +401,7 @@ class Gnav {
       this.elements.aside,
       this.elements.topnavWrapper,
     );
+
     this.decorateLocalNav();
   };
 
@@ -936,6 +938,8 @@ class Gnav {
     return 'link';
   };
 
+
+
   decorateMainNavItem = (item, index) => {
     const itemType = this.getMainNavItemType(item);
 
@@ -949,6 +953,31 @@ class Gnav {
       }
     };
 
+    // Copying dropdown contents to localNav items
+    const decorateLocalNavItems = (item, template) => {
+      const elements = [...document.querySelectorAll(".feds-localnav .feds-navItem")].find(
+        (el) => el.textContent.trim() === item.textContent
+      );
+
+      if (elements) {
+        elements.innerHTML = template.innerHTML;
+
+        // Reattach the click event listener to the title, as cloned elements do not retain existing event listeners.
+        elements.querySelector('button')?.addEventListener('click', (e) => {
+          trigger({ element: e.currentTarget, event: e, type: 'localNavTitle' });
+          setActiveDropdown(e.currentTarget);
+        });
+
+        elements.querySelectorAll('.feds-menu-headline').forEach(elem => {
+          // Reattach click event listener to headlines
+          elem?.addEventListener('click', (e) => {    
+            trigger({ element: e.currentTarget, event: e, type: 'headline' });
+            setActiveDropdown(e.currentTarget);
+          });
+        })
+      }
+    }
+
     // All dropdown decoration is delayed
     const delayDropdownDecoration = ({ template } = {}) => {
       let decorationTimeout;
@@ -964,6 +993,11 @@ class Gnav {
           template,
           type: itemType,
         });
+
+        if (this.isLocalNav() && newNavEnabled) {
+          decorateLocalNavItems(item, template)
+        }
+
         const popup = template.querySelector('.feds-popup');
         let originalContent = popup.innerHTML;
 

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

@@ -9,6 +9,11 @@ loadLana();
 
 const FEDERAL_PATH_KEY = 'federal';
 
+const selectorMap = {
+  headline: '.feds-menu-headline[aria-expanded="true"]',
+  localNavTitle: '.feds-navLink[aria-expanded="true"]',
+};
+
 export const selectors = {
   globalNav: '.global-navigation',
   curtain: '.feds-curtain',
@@ -302,9 +307,8 @@ export const [hasActiveLink, setActiveLink, isActiveLink, getActiveLink] = (() =
 })();
 
 export function closeAllDropdowns({ type } = {}) {
-  const selector = type === 'headline'
-    ? '.feds-menu-headline[aria-expanded="true"]'
-    : `${selectors.globalNav} [aria-expanded='true']`;
+  const selector = selectorMap[type] || `${selectors.globalNav} [aria-expanded='true']`;
+
   const openElements = document.querySelectorAll(selector);
   if (!openElements) return;
   [...openElements].forEach((el) => {
@@ -414,6 +418,9 @@ export const [setUserProfile, getUserProfile] = (() => {
 })();
 
 export const transformTemplateToMobile = async (popup, item, localnav = false) => {
+  const notMegaMenu = popup.parentElement.tagName === 'DIV';
+  if (notMegaMenu) return;
+
   const originalContent = popup.innerHTML;
   const tabs = [...popup.querySelectorAll('.feds-menu-section')]
     .filter((section) => !section.querySelector('.feds-promo') && section.textContent)