top menu, styles

src/components/navigation/menu-item/menu-item.scss

@@ -2,6 +2,7 @@
   display: block;
   visibility: visible;
 }
+
 :host(.hy-menu-item--desktop:not(.hy-menu-item--is-active)) {
   display: none;
   visibility: hidden;
@@ -49,29 +50,74 @@
 
 :host(.hy-menu-item--desktop[depth='1']) {
   a {
-    @include font-size(18px, 18px); //@todo check font size
-    border: 1px solid orange;
-    background-color: var(--grayscale-background-box);
-    margin-bottom: 8px; //@todo check margin
-    padding-left: 32px;
-    padding-right: 32px;
-    text-transform: none;
+    @include breakpoint($extrawide) {
+      @include font-size(24px, 32px);
+      background-color: var(--grayscale-background-box);
+      letter-spacing: -0.75px;
+      margin-bottom: 4px;
+      padding-left: 32px;
+      padding-right: 32px;
+      padding-top: 5px;
+      position: relative;
+      text-transform: none;
+    }
+    @include breakpoint($fullhd) {
+      @include font-size(26px, 32px);
+      letter-spacing: -0.81px;
+      margin-bottom: 6px;
+      padding-top: 19px;
+    }
 
     .hy-menu-item__label {
       border: none;
+      margin-left: 14px;
+    }
+
+    span.hy-menu-item__heading__icon {
+      position: absolute;
+      top: 12px;
+      left: -6px;
+
+      @include breakpoint($fullhd) {
+        top: 27px;
+      }
+
+      svg {
+        background-color: var(--brand-main-light);
+        fill: var(--grayscale-white);
+        padding: 8px;
+      }
     }
-  }
-  a:before {
   }
 }
 :host(.hy-menu-item--desktop[depth='2']) {
   a {
-    @include font-size(14px, 14px); //@todo check font size
-    padding-left: 32px;
-    padding-right: 32px;
-    text-transform: none;
-  }
-  a:before {
+    @include breakpoint($extrawide) {
+      @include font-size(15px, 22px);
+      letter-spacing: -0.47px;
+      padding-left: 24px;
+      padding-right: 24px;
+      text-transform: none;
+    }
+
+    @include breakpoint($fullhd) {
+      @include font-size(18px, 22px);
+      letter-spacing: -0.56px;
+    }
+
+    .hy-menu-item__label {
+      border: none;
+      margin-left: 12px;
+    }
+
+    span.hy-menu-item__heading__icon {
+      svg {
+        fill: var(--brand-main-light);
+        @include breakpoint($extrawide) {
+          padding: 1px 0;
+        }
+      }
+    }
   }
 }
 

src/components/navigation/menu-item/menu-item.tsx

@@ -167,12 +167,12 @@ export class MenuItem {
             >
               {this.depth == 1 && (
                 <span class="hy-menu-item__heading__icon">
-                  <hy-icon icon={'hy-icon-arrow-right'} size={20} />
+                  <hy-icon icon={'hy-icon-arrow-right'} size={40} />
                 </span>
               )}
               {this.depth == 2 && (
                 <span class="hy-menu-item__heading__icon">
-                  <hy-icon icon={'hy-icon-caret-right'} size={10} />
+                  <hy-icon icon={'hy-icon-caret-right'} size={12} />
                 </span>
               )}
               <span class={'hy-menu-item__label'}>{this.label}</span>

src/components/navigation/menu-level-container/menu-level-container.tsx

@@ -127,10 +127,9 @@ export class MenuLevelContainer {
     switch (this.menuType) {
       case MenuType.desktop:
         classAttributes = [...classAttributes, 'hy-menu-level-container--desktop'];
-        //menu-type="sidenav"
 
         return (
-          <Host class={classAttributes.join(' ')} menu-type="desktop">
+          <Host class={classAttributes.join(' ')}>
             <slot />
           </Host>
         );

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -14,27 +14,45 @@
       cursor: pointer;
       font-family: var(--main-font-family);
 
-      @include breakpoint($medium) {
-        @include font-size(14px, 14px);
-        @include font-weight($bold);
-        border-top: 0 none;
-        padding: 10px 15px;
-        text-transform: uppercase;
-      }
-
       @include breakpoint($extrawide) {
         @include font-size(15px, 16px);
+        @include font-weight($bold);
+
+        border-top: 0 none;
         padding: 10px 8px;
+        text-transform: uppercase;
       }
 
-      @include breakpoint($overwide) {
+      @include breakpoint($fullhd) {
         @include font-size(18px, 16px);
+        letter-spacing: -0.5px;
         padding: 10px;
       }
 
+      &__heading__icon {
+        display: none;
+      }
+
       &--is-active {
         background-color: var(--grayscale-background-box);
-        padding: 52px 10px;
+        padding: 35px 10px;
+        position: relative;
+
+        .desktop-menu-link__heading__icon {
+          bottom: 14px;
+          display: block;
+          left: 0;
+          position: absolute;
+          width: 100%;
+
+          hy-icon {
+            justify-content: center;
+            transform: rotateX(180deg);
+            svg {
+              padding: 4px 0;
+            }
+          }
+        }
       }
     }
   }

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -61,6 +61,7 @@ export class HyDesktopMenuLinks {
     event.stopPropagation();
   }
 
+  //Show desktop menu panel
   handleMenuDesktopHover(id) {
     let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
     desktopMenuItems.forEach((item) => {
@@ -79,16 +80,11 @@ export class HyDesktopMenuLinks {
 
         //@todo show proper subtree on panel based on given menu-link-id
         // Hide all menu-item that have other menu-link-id attribute value.
-        let menuItems = document.querySelectorAll('hy-site-header hy-menu-item[depth="1"]');
+        let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
         menuItems.forEach((item) => {
           (item as HTMLElement).classList.remove('hy-menu-item--is-active');
         });
 
-        let menuItemsLevel2 = document.querySelectorAll('hy-site-header hy-menu-item[depth="2"]');
-        menuItemsLevel2.forEach((item) => {
-          (item as HTMLElement).classList.remove('hy-menu-item--is-active');
-        });
-
         let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]');
         (menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--is-active');
 
@@ -112,7 +108,6 @@ export class HyDesktopMenuLinks {
     let firstLevelLinksList = [];
 
     for (let i = 0; i < links.length; i++) {
-      //let className = 'desktop-menu-link-' + links[i].menuLinkId;
       let className = 'desktop-menu-link';
       firstLevelLinksList.push(
         <div
@@ -122,7 +117,7 @@ export class HyDesktopMenuLinks {
         >
           {links[i].label}
           <span class="desktop-menu-link__heading__icon">
-            <hy-icon icon={'hy-icon-caret-right'} size={10} />
+            <hy-icon icon={'hy-icon-caret-down'} size={16} />
           </span>
         </div>
       );

src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx

@@ -22,6 +22,15 @@ export class HyDesktopMenuPanel {
     if (hyDesktopPanel) {
       //hide panel, remove class is-active
       (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
+
+      let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
+      if (parentMenu) {
+        const items = Array.from(parentMenu);
+        items.forEach((item) => {
+          item.classList.add('hy-menu-level-container--mobile');
+          item.classList.remove('hy-menu-level-container--desktop');
+        });
+      }
     }
   }