Merge pull request #646 from tblivet/issue-637

Author: boherm

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>
 

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 = {

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]

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 {