Adding image support for large menu and medium menus on gnav (#3235)

* Adding image support on gnav * Decorating localnav only if it has one section * Lint fix
adobecom · Jan 14, 2025 · c2152a0 · c2152a0
1 parent ff17a03
commit c2152a0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/libs/blocks/fallback/fallback.js b/libs/blocks/fallback/fallback.js
@@ -18,6 +18,7 @@ const SYNTHETIC_BLOCKS = [
   'search',
   'social',
   'product-entry-cta',
+  'gnav-image',
 ];
 
 // eslint-disable-next-line import/prefer-default-export

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -387,10 +387,11 @@ class Gnav {
   };
 
   decorateLocalNav = async () => {
+    if (!this.isLocalNav()) return;
     const localNavItems = this.elements.navWrapper.querySelector('.feds-nav').querySelectorAll('.feds-navItem:not(.feds-navItem--section)');
     const [title, navTitle = ''] = this.getOriginalTitle(localNavItems);
 
-    if (this.elements.localNav || !this.newMobileNav || !this.isLocalNav() || isDesktop.matches) {
+    if (this.elements.localNav || !this.newMobileNav || isDesktop.matches) {
       localNavItems[0].querySelector('a').textContent = title.trim();
     } else {
       const localNav = document.querySelector('.feds-localnav');

diff --git a/libs/blocks/global-navigation/utilities/menu/menu.css b/libs/blocks/global-navigation/utilities/menu/menu.css
@@ -71,6 +71,10 @@
   box-sizing: content-box;
 }
 
+.feds-localnav-items .feds-menu-headline:after {
+  right: 38px;
+}
+
 [dir = "rtl"] .feds-menu-headline:after {
   right: unset;
   left: 30px;
@@ -88,6 +92,15 @@
   display: none;
 }
 
+.feds-image-wrapper {
+  padding: 12px 38px;
+}
+
+.gnav-image {
+  width: 316px;
+  box-sizing: content-box;
+}
+
 @media (min-width: 900px) {
   .feds-menu-content {
     display: flex;

diff --git a/libs/blocks/global-navigation/utilities/menu/menu.js b/libs/blocks/global-navigation/utilities/menu/menu.js
@@ -125,6 +125,17 @@ const decorateElements = ({ elem, className = 'feds-navLink', itemIndex = { posi
   return elem;
 };
 
+const decorateGnavImage = (elem) => {
+  const linkElem = elem.querySelector('a');
+  const imageElem = elem.querySelector('picture');
+  const promoImageElem = linkElem instanceof HTMLElement
+    ? toFragment`<a class="feds-image" href="${linkElem.href}">${imageElem}</a>`
+    : toFragment`<div class="feds-image">${imageElem}</div>`;
+
+  elem.replaceChildren(promoImageElem);
+  return toFragment`<div class="feds-image-wrapper">${elem}</div>`;
+};
+
 // Current limitation: we can only add one link
 const decoratePromo = (elem, index) => {
   const isDarkTheme = elem.matches('.dark');
@@ -251,6 +262,12 @@ const decorateColumns = async ({ content, separatorTagName = 'H5' } = {}) => {
         const promoElem = decoratePromo(columnElem, itemIndex);
 
         itemDestination.append(promoElem);
+      } else if (columnElem.matches('.gnav-image')) {
+        resetDestination();
+        itemIndex.position = 0;
+        const imageElem = decorateGnavImage(columnElem, itemIndex);
+
+        itemDestination.append(imageElem);
       } else {
         const decoratedElem = decorateElements({ elem: columnElem, itemIndex });
         columnElem.remove();