feat(mega-menu): Improving menu positioning, some style changes - FRO…

…NT-4456 (#3426)
ec-europa · Jun 11, 2024 · e920970 · e920970 · github-actions · Jun 11, 2024
1 parent f78ab1d
commit e920970
Show file tree

Hide file tree

Showing 10 changed files with 532 additions and 118 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -34,7 +34,7 @@
   },
   {
     "path": "dist/packages/eu/scripts/ecl-eu.js",
-    "limit": "195 KB",
+    "limit": "215 KB",
     "webpack": false,
     "gzip": false,
     "brotli": false

diff --git a/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap b/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
diff --git a/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig b/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
@@ -93,12 +93,18 @@
 
 {% if (_item.children is defined and _item.children is not empty and _item.children is iterable) or _item.container is not empty %}
   {% set _can_be_external = false %}
-  {% set _icon = {
+  {% set _icon = [{
     name: 'corner-arrow',
     transform: 'rotate-90',
     path: _icon_path,
     size: '2xs',
-  } %}
+  },
+  {
+    name: 'arrow-left',
+    transform: 'flip-horizontal',
+    path: _icon_path,
+    size: 's',
+  }] %}
 {% endif %}
 
 {%- if _item.label is not empty -%}
@@ -191,6 +197,9 @@
         {% set _subitem_attrs = 'data-ecl-mega-menu-subitem' %}
         {% set _subitem_class = 'ecl-mega-menu__subitem' %}
         {% set _sublink_class = 'ecl-mega-menu__sublink' %}
+        {% if loop.last %}
+          {% set _sublink_class = _sublink_class ~ ' ecl-mega-menu__sublink--last' %}
+        {% endif %}
         {% set _sublink_attrs = child.extra_attributes|default([])|merge([
           { name: _menu_sublink_attribute },
         ]) %}

diff --git a/src/implementations/vanilla/components/mega-menu/mega-menu.js b/src/implementations/vanilla/components/mega-menu/mega-menu.js
@@ -703,6 +703,8 @@ export class MegaMenu {
    */
   positionMenuOverlay() {
     const menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
+    let parentLink = null;
+    let parentHeight = 0;
     if (!this.isDesktop) {
       // In mobile, we get the bottom position of the site header header
       setTimeout(() => {
@@ -715,6 +717,21 @@ export class MegaMenu {
         if (header) {
           const position = header.getBoundingClientRect();
           const bottomPosition = Math.round(position.bottom);
+          if (this.openPanel.num === 1) {
+            parentLink = queryOne(
+              '.ecl-mega-menu__item--expanded a',
+              this.element,
+            );
+          } else if (this.openPanel.num === 2) {
+            parentLink = queryOne(
+              '.ecl-mega-menu__subitem--expanded a',
+              this.element,
+            );
+          }
+          if (parentLink) {
+            const parentRect = parentLink.getBoundingClientRect();
+            parentHeight = parentRect.height;
+          }
           if (menuOverlay) {
             menuOverlay.style.top = `${bottomPosition}px`;
           }
@@ -724,8 +741,18 @@ export class MegaMenu {
           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
           if (wrappers) {
             wrappers.forEach((wrapper) => {
-              wrapper.style.top = `${bottomPosition}px`;
+              wrapper.style.top = parentLink
+                ? `${parentHeight}px`
+                : `${bottomPosition}px`;
             });
+          } else if (this.openPanel.num === 2 && parentLink) {
+            const infoPanel = queryOne(
+              '.ecl-mega-menu__info',
+              parentLink.closest('.ecl-container'),
+            );
+            if (infoPanel) {
+              infoPanel.style.top = `${parentHeight - 2}px`;
+            }
           }
         }
       }, 0);
@@ -1198,18 +1225,6 @@ export class MegaMenu {
     }
   }
 
-  /**
-   * Get the height of the parent link
-   *
-   * @param {Node} item
-   */
-  getParentHeight(item) {
-    const styles = window.getComputedStyle(item);
-    const parentHeight = parseFloat(styles.height);
-
-    return parentHeight;
-  }
-
   /**
    * Show/hide the second panel
    *
@@ -1226,7 +1241,6 @@ export class MegaMenu {
     let siblings;
     switch (op) {
       case 'expand': {
-        let parentHeight = 45;
         this.element.classList.remove('ecl-mega-menu--one-panel');
         this.element.classList.add('ecl-mega-menu--two-panels');
         this.subItems.forEach((item) => {
@@ -1238,11 +1252,6 @@ export class MegaMenu {
               if (!this.isDesktop) {
                 // We use this class mainly to recover the default behavior of the link.
                 itemLink.classList.add('ecl-mega-menu__parent-link');
-                // Second panel in mobile is tricky, elements are relatively positioned.
-                parentHeight = this.getParentHeight(itemLink);
-                if (infoPanel) {
-                  infoPanel.style.top = `${parentHeight}px`;
-                }
               }
               item.classList.add('ecl-mega-menu__subitem--expanded');
             }
@@ -1276,7 +1285,7 @@ export class MegaMenu {
             }
           });
         }
-
+        this.positionMenuOverlay();
         const details = { panel: 2, item: menuItem };
         this.trigger('OnOpenPanel', details);
         break;
@@ -1336,6 +1345,7 @@ export class MegaMenu {
       const hasChildren = menuItem.getAttribute('aria-expanded');
       if (hasChildren && menuItem.classList.contains('ecl-mega-menu__item')) {
         e.preventDefault();
+        e.stopPropagation();
         if (!this.isDesktop) {
           this.handleFirstPanel(menuItem, 'expand');
         } else {
@@ -1364,6 +1374,7 @@ export class MegaMenu {
         return;
       }
       e.preventDefault();
+      e.stopPropagation();
       const isExpanded = menuItem.getAttribute('aria-expanded') === 'true';
 
       if (isExpanded) {
@@ -1459,7 +1470,7 @@ export class MegaMenu {
 
     // Specific focus action for mobile menu
     // Loop through the items and go back to close button
-    if (menuExpanded === 'true') {
+    if (menuExpanded === 'true' && !this.isDesktop) {
       const nextItem = element.parentElement.nextSibling;
 
       if (!nextItem) {