diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index 0ffa09cfae5bbe97169f95db5373801fd063780e..09c53f62f90ff3ba35660c844856858195526efd 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -3,14 +3,286 @@
}
.hy-site-header {
+ // nav
+ &__menu-desktop {
+ }
+
+ // ul
&__menu-desktop-container {
align-items: center;
display: flex;
flex-flow: row;
list-style: none;
width: 100%;
+
+ // First level menu items
+ .desktop-menu-link {
+ background-color: transparent;
+ border: none;
+ color: var(--brand-main-nearly-black);
+ cursor: pointer;
+ font-family: var(--main-font-family);
+
+ @include breakpoint($extrawide) {
+ @include font-size(15px, 16px);
+ @include font-weight($bold);
+
+ border-top: 0 none;
+ padding: 10px 8px;
+ text-transform: uppercase;
+ }
+
+ @include breakpoint($fullhd) {
+ @include font-size(18px, 16px);
+ letter-spacing: -0.5px;
+ padding: 10px;
+ }
+
+ &__heading__icon {
+ display: none;
+ }
+
+ &--is-active-trail {
+ @include breakpoint($extrawide) {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ padding-bottom: 8px;
+ }
+
+ @include breakpoint($overwide) {
+ padding-bottom: 12px;
+ }
+ }
+
+ &--is-active {
+ background-color: var(--grayscale-background-box);
+ 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;
+ }
+ }
+ }
+ }
+ }
+
+ // Panel with second level menu items and shortcuts.
+ .hy-desktop-menu-panel {
+ display: none;
+
+ &--is-active {
+ background-color: var(--grayscale-white);
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ opacity: 1;
+ position: absolute;
+ left: 0;
+ top: 104px;
+ width: 100%;
+ z-index: 510;
+ }
+
+ &__panel-toggle {
+ background-color: transparent;
+ border: none;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+
+ &__label {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ color: var(--grayscale-black);
+ display: flex;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.56px;
+ margin-bottom: 18px;
+ text-transform: uppercase;
+ &__title {
+ padding-right: 5px;
+ }
+ }
+ }
+
+ &__desktop-menu {
+ position: relative;
+
+ // first level link inside panel
+ a.menu-item-first-level-link {
+ @include font-weight($bold);
+ align-items: center;
+ color: var(--brand-main-nearly-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ text-decoration: none;
+ width: 100%;
+
+ @include breakpoint($extrawide) {
+ @include font-size(24px, 32px);
+ align-items: flex-start;
+ background-color: var(--grayscale-background-box);
+ flex-direction: column;
+ letter-spacing: -0.75px;
+ margin-bottom: 4px;
+ padding: 17px 32px 12px 32px;
+ 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;
+ }
+ .hy-menu-item__description {
+ @include font-size(16px, 24px);
+ @include font-weight($semibold);
+ color: var(--grayscale-dark);
+ letter-spacing: 0;
+ margin-left: 14px;
+ margin-bottom: 28px;
+ }
+
+ span.heading-icon-first {
+ position: absolute;
+ top: 12px;
+ left: -6px;
+
+ @include breakpoint($fullhd) {
+ top: 27px;
+ }
+
+ svg {
+ background-color: var(--brand-main-light);
+ fill: var(--grayscale-white);
+ padding: 8px;
+ }
+ }
+ }
+
+ // menu item links
+ ul.desktop-menu {
+ background-color: var(--grayscale-background-box);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ a {
+ @include font-weight($bold);
+ align-items: center;
+ color: var(--brand-main-nearly-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ text-decoration: none;
+ width: 100%;
+
+ @include breakpoint($extrawide) {
+ @include font-size(15px, 22px);
+ align-items: center;
+ flex-direction: row;
+ 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;
+ }
+
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: -2px;
+ }
+
+ .hy-menu-item__label {
+ @include breakpoint($extrawide) {
+ border: none;
+ margin-left: 12px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+ }
+
+ span.heading-icon-second {
+ svg {
+ fill: var(--brand-main-light);
+ @include breakpoint($extrawide) {
+ padding: 1px 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Shortcuts
+ .shortcuts-panel {
+ &__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ //border-bottom: 1px solid var(--grayscale-medium-dark);
+ color: var(--grayscale-black);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.56px;
+ margin-bottom: 18px;
+ text-transform: uppercase;
+ }
+ &__shortcut-item {
+ border-bottom: 1px solid var(--grayscale-medium-dark);
+ &__first {
+ border-top: 1px solid var(--grayscale-medium-dark);
+ }
+
+ a {
+ @include font-size(16px, 22px);
+ @include font-weight($semibold);
+ color: var(--grayscale-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.5px;
+ padding: 19px 0;
+ text-decoration: none;
+ }
+
+ span.shortcut-item__icon {
+ position: absolute;
+ right: 0;
+
+ svg {
+ padding: 4px;
+ }
+ }
+ }
+ }
}
+}
+/*
+.hy-site-header {
&__menu-desktop {
.desktop-menu-link {
color: var(--brand-main-nearly-black);
@@ -207,62 +479,6 @@
}
}
}
-
- ul.second {
- background-color: var(--grayscale-background-box);
- }
-
- ul.desktop-menu {
- display: none;
- &--is-active {
- display: block;
- }
- }
- }
-
- &__panel-toggle {
- position: absolute;
- right: 10px;
- top: 10px;
- }
-
- .shortcuts-panel {
- &__title {
- @include font-size(18px, 22px);
- @include font-weight($bold);
- //border-bottom: 1px solid var(--grayscale-medium-dark);
- color: var(--grayscale-black);
- font-family: var(--main-font-family);
- letter-spacing: -0.56px;
- margin-bottom: 18px;
- text-transform: uppercase;
- }
- &__shortcut-item {
- border-bottom: 1px solid var(--grayscale-medium-dark);
- &__first {
- border-top: 1px solid var(--grayscale-medium-dark);
- }
-
- a {
- @include font-size(16px, 22px);
- @include font-weight($semibold);
- color: var(--grayscale-black);
- display: flex;
- flex-direction: row;
- font-family: var(--main-font-family);
- letter-spacing: -0.5px;
- padding: 19px 0;
- text-decoration: none;
- }
-
- span.shortcut-item__icon {
- position: absolute;
- right: 0;
-
- svg {
- padding: 4px;
- }
- }
- }
}
}
+*/
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 323d9b3720fcd7fdac52cfe9bdac0d9c8706071c..520b3d8e5a132c5f5c08480aad4553506ed7856d 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -61,10 +61,12 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuToggle(id) {
+ console.log(id);
+
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
- const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
+ const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
- const activeMenuItemSibling = activeMenuItem.nextElementSibling;
+ const activeMenuItemSibling = activeMenuItem.nextElementSibling; // current panel
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
@@ -101,7 +103,7 @@ export class HyDesktopMenuLinks {
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}>
<div class="hy-desktop-menu-panel__desktop-menu">
- <a aria-current={label} href={url} class="" menu-link-id={id}>
+ <a aria-current={label} href={url} class="menu-item-first-level-link" menu-link-id={id}>
<span class="heading-icon-first">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
@@ -109,10 +111,14 @@ export class HyDesktopMenuLinks {
<span class="hy-menu-item__description">{description}</span>
</a>
<ul class={'desktop-menu first'} menu-link-id={id}>
- {items.map(({label, url, description}) => (
+ {items.map(({label, url}) => (
<li>
- <a href={url}>{label}</a>
- <span>{description}</span>
+ <a href={url}>
+ <span class="heading-icon-second">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ </span>
+ <span class="hy-menu-item__label">{label}</span>
+ </a>
</li>
))}
</ul>
@@ -155,7 +161,7 @@ export class HyDesktopMenuLinks {
aria-label="close"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
- CLOSE
+ <span class="hy-desktop-menu-panel__panel-toggle__label__title">CLOSE</span>
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>