feat(mega-menu): Adding style for the current sub-items in desktop - …

…FRONT-4527 (#3503)

src/implementations/vanilla/components/mega-menu/mega-menu.js

@@ -179,23 +179,10 @@ export class MegaMenu {
     this.subItems = queryAll(this.subItemSelector, this.element);
     this.links = queryAll(this.linkSelector, this.element);
     this.headerBanner = queryOne('.ecl-site-header__banner', document);
-
+    this.toggleLabel = queryOne('.ecl-link__label', this.open);
     // Check if we should use desktop display (it does not rely only on breakpoints)
     this.isDesktop = this.useDesktopDisplay();
 
-    // Replace the open/close link with a button
-    if (this.open) {
-      const buttonElement = document.createElement('button');
-      buttonElement.classList =
-        'ecl-button ecl-button--tertiary ecl-button--icon-only ecl-mega-menu__open';
-      buttonElement.type = 'button';
-      const label = queryOne('span', this.open);
-      label.classList.add('ecl-button__label');
-      buttonElement.innerHTML = this.open.innerHTML;
-      this.open.parentNode.replaceChild(buttonElement, this.open);
-      this.open = buttonElement;
-    }
-    this.toggleLabel = queryOne('.ecl-link__label', this.open);
     // Bind click events on buttons
     if (this.attachClickListener) {
       // Open

src/implementations/vanilla/components/mega-menu/mega-menu.scss

@@ -398,6 +398,10 @@ $mega-menu: null !default;
   }
 }
 
+.ecl-mega-menu--rtl .ecl-icon--flip-horizontal {
+  transform: rotate(0);
+}
+
 .ecl-mega-menu__featured-list__item .ecl-link {
   border-bottom: 1px solid map.get($mega-menu, 'mobile', 'featured-link-border');
 }
@@ -1206,6 +1210,7 @@ $mega-menu: null !default;
 
     .ecl-mega-menu__sublink {
       break-inside: avoid-column;
+      border-inline-start: 4px solid transparent;
       margin: 0;
       padding: map.get($mega-menu, 'desktop', 'sublink-padding');
       white-space: normal;
@@ -1230,6 +1235,7 @@ $mega-menu: null !default;
           'desktop',
           'sublink-current-background'
         );
+        border-color: var(--c-p);
       }
     }
   }
@@ -1326,15 +1332,6 @@ $mega-menu: null !default;
 
       > .ecl-mega-menu__mega {
         left: calc(15.875rem + var(--s-xl));
-
-        > .ecl-mega-menu__sublist {
-          direction: rtl;
-          overflow-x: hidden;
-
-          > .ecl-mega-menu__subitem {
-            direction: ltr;
-          }
-        }
       }
     }
 
@@ -1344,14 +1341,6 @@ $mega-menu: null !default;
       > .ecl-container
       > .ecl-mega-menu__mega {
       right: calc(14.375rem + var(--s-xl));
-
-      > .ecl-mega-menu__sublist {
-        direction: ltr;
-
-        > .ecl-mega-menu__subitem {
-          direction: rtl;
-        }
-      }
     }
   }
 }

src/implementations/vanilla/components/site-header/site-header-ec.scss

@@ -49,6 +49,10 @@ $language-list: null !default;
     z-index: 54;
   }
 
+  .ecl-mega-menu--rtl .ecl-mega-menu__open {
+    margin-inline-start: var(--s-m);
+  }
+
   .ecl-site-header__cta {
     margin-top: var(--s-s);
     position: relative;