From 77780e905f815f5eb44a9d6dd21ef5f80cebf9d4 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Tue, 16 Jul 2024 14:43:40 +0200
Subject: [PATCH] feat: allow multi rows on mainmenu

---
 modules/ps_mainmenu/ps_mainmenu.tpl    |  4 ++--
 src/js/constants/selectors-map.ts      |  2 ++
 src/js/modules/ps_mainmenu.ts          | 15 +++++++++++++++
 src/scss/custom/modules/_mainmenu.scss |  7 +++++--
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/modules/ps_mainmenu/ps_mainmenu.tpl b/modules/ps_mainmenu/ps_mainmenu.tpl
index deb3cc915..be626fcd8 100644
--- a/modules/ps_mainmenu/ps_mainmenu.tpl
+++ b/modules/ps_mainmenu/ps_mainmenu.tpl
@@ -7,7 +7,7 @@
     >
     {foreach from=$nodes item=node}
       <li
-        class="{$node.type}{if $node.current} current{/if}{if $depth === 0} main-menu__tree__item d-flex align-items-center h-100{/if}"
+        class="{$node.type}{if $node.current} current{/if}{if $depth === 0} js-menu-item-lvl-0 main-menu__tree__item d-flex align-items-center h-100{/if}"
         id="{$node.page_identifier}"
       >
         {if $depth > 1 && $node.children|count}
@@ -105,7 +105,7 @@
 {/function}
 
 <div class="main-menu col-xl col-auto d-flex align-items-center">
-  <div class="d-none d-xl-block position-static js-menu-desktop h-100">
+  <div class="d-none d-xl-block position-static js-menu-desktop">
     {desktopMenu nodes=$menu.children}
   </div>
 
diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
index 1c4fb7253..1805bcfc4 100644
--- a/src/js/constants/selectors-map.ts
+++ b/src/js/constants/selectors-map.ts
@@ -117,6 +117,8 @@ export const visiblePassword = {
 export const desktopMenu = {
   dropdownToggles: '.js-menu-desktop .dropdown .dropdown-toggle[data-depth]',
   dropdownItemAnchor: (depth: number) => `.js-menu-desktop a[data-depth="${depth}"]`,
+  menuItemsLvl0: '.js-menu-item-lvl-0',
+  subMenu: '.js-sub-menu',
 };
 
 export const qtyInput = {
diff --git a/src/js/modules/ps_mainmenu.ts b/src/js/modules/ps_mainmenu.ts
index bf354b735..8c9b42dd7 100644
--- a/src/js/modules/ps_mainmenu.ts
+++ b/src/js/modules/ps_mainmenu.ts
@@ -15,6 +15,21 @@ const initDesktopMenu = () => {
   const {Theme} = window;
   const {desktopMenu: desktopMenuMap} = Theme.selectors;
 
+  /**
+   * Handle submenu position
+   */
+  const menuItemsLvl0 = document.querySelectorAll(desktopMenuMap.menuItemsLvl0);
+
+  if (menuItemsLvl0) {
+    menuItemsLvl0.forEach((element: HTMLElement) => {
+      element.addEventListener('mouseenter', () => {
+        const subMenuTopPosition = element.offsetHeight + element.offsetTop;
+        const subMenu = element.querySelector(desktopMenuMap.subMenu) as HTMLElement;
+        subMenu.style.top = `${subMenuTopPosition}px`;
+      });
+    });
+  }
+
   /**
    * Handle Mouse and Keyboard events for Submenus.
    * Find all dropdown toggles with [data-depth: ^2]
diff --git a/src/scss/custom/modules/_mainmenu.scss b/src/scss/custom/modules/_mainmenu.scss
index 6ecc9e07d..cbf623ce6 100644
--- a/src/scss/custom/modules/_mainmenu.scss
+++ b/src/scss/custom/modules/_mainmenu.scss
@@ -6,6 +6,8 @@
   }
 
   &__tree {
+    flex-wrap: wrap;
+
     > li {
       > a {
         padding: 1.5rem 1rem;
@@ -25,8 +27,9 @@
         left: 0;
         z-index: $zindex-offcanvas;
         display: none;
-        padding: 0.725rem 0;
-        background-color: #fff;
+        padding: 1rem 0;
+        background-color: var(--bs-white);
+        border-top: 1px solid var(--bs-gray-200);
 
         &.focusing,
         &:focus-within {