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..a11d6997b2f09d713c48cff0c1324eaa23b1a3e3 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,16 +3,18 @@
}
.hy-site-header {
+ // ul - menu items first level and panels that consist of menu items second level and shortcut items per panel.
&__menu-desktop-container {
align-items: center;
display: flex;
flex-flow: row;
list-style: none;
width: 100%;
- }
- &__menu-desktop {
+ // 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);
@@ -32,10 +34,7 @@
padding: 10px;
}
- &__heading__icon {
- display: none;
- }
-
+ // Underline if link is in active trail.
&--is-active-trail {
@include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black);
@@ -46,6 +45,12 @@
padding-bottom: 12px;
}
}
+
+ &__heading__icon {
+ display: none;
+ }
+
+ // On hover: change background and show heading icon.
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
@@ -68,61 +73,60 @@
}
}
}
- }
-}
-.hy-desktop-menu-panel {
- display: none;
+ // 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;
- }
+ &--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;
+ }
- &__desktop-menu {
- position: relative;
- left: 120px;
- width: 50%;
+ &__panel-toggle {
+ background-color: transparent;
+ border: none;
+ position: absolute;
+ right: 10px;
+ top: 10px;
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
+ &__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;
+ }
+ }
+ }
- li {
- a {
+ &__desktop-menu {
+ position: relative;
+
+ // first level link inside panel
+ &__first-level-menu-item {
@include font-weight($bold);
- align-items: center;
+ //align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
- flex-direction: row;
+ //flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: -2px;
- }
- .hy-menu-item__label {
- @include breakpoint($extrawide) {
- padding-top: 12px;
- padding-bottom: 12px;
- }
- }
- }
- }
-
- li.first {
- a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
@@ -130,9 +134,7 @@
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
- padding-left: 32px;
- padding-right: 32px;
- padding-top: 5px;
+ padding: 17px 32px 12px 32px;
position: relative;
text-transform: none;
}
@@ -143,28 +145,27 @@
padding-top: 19px;
}
- .hy-menu-item__label {
+ .label {
border: none;
margin-left: 14px;
}
- .hy-menu-item__description {
+ .description {
@include font-size(16px, 24px);
@include font-weight($semibold);
color: var(--grayscale-dark);
letter-spacing: 0;
margin-left: 14px;
margin-bottom: 28px;
+ margin-top: 8px;
}
- span.heading-icon-first {
+ span.heading-icon {
position: absolute;
top: 12px;
left: -6px;
-
@include breakpoint($fullhd) {
top: 27px;
}
-
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
@@ -172,35 +173,61 @@
}
}
}
- }
- li.second {
- a {
- @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;
- }
+ // menu item links
+ &__second-level-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($fullhd) {
- @include font-size(18px, 22px);
- letter-spacing: -0.56px;
- }
+ @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;
+ }
- .hy-menu-item__label {
- border: none;
- margin-left: 12px;
- }
+ @include breakpoint($fullhd) {
+ @include font-size(18px, 22px);
+ letter-spacing: -0.56px;
+ }
- span.heading-icon-second {
- svg {
- fill: var(--brand-main-light);
- @include breakpoint($extrawide) {
- padding: 1px 0;
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: -2px;
+ }
+
+ .label {
+ @include breakpoint($extrawide) {
+ border: none;
+ margin-left: 12px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+ }
+
+ span.heading-icon {
+ svg {
+ fill: var(--brand-main-light);
+ @include breakpoint($extrawide) {
+ padding: 1px 0;
+ }
+ }
}
}
}
@@ -208,59 +235,44 @@
}
}
- 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);
- }
+ // Shortcuts
+ .shortcuts-panel {
+ list-style: none;
- a {
- @include font-size(16px, 22px);
- @include font-weight($semibold);
+ &__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
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;
+ letter-spacing: -0.56px;
+ margin-bottom: 18px;
+ text-transform: uppercase;
}
- span.shortcut-item__icon {
- position: absolute;
- right: 0;
+ &__shortcut-item {
+ border-bottom: 1px solid var(--grayscale-medium-dark);
+ &__first {
+ border-top: 1px solid var(--grayscale-medium-dark);
+ }
- svg {
- padding: 4px;
+ 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;
+
+ .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 8f7a687683b1b1055124732d2a9dc447f71463e2..b47b0b663f2df8d2d342c128dd3870f20e0c605b 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) => {
@@ -88,12 +90,16 @@ export class HyDesktopMenuLinks {
let menuLinkItems = [];
- links.map(({menuLinkId: id, shortcuts, items, url, description, label}) => {
+ links.map(({menuLinkId: id, shortcuts, items, url, description, label, isActive}) => {
+ let classAttributes = ['desktop-menu-link', isActive === 'true' ? 'desktop-menu-link--is-active-trail' : ''].join(
+ ' '
+ );
+
menuLinkItems.push(
<li>
<button
type="button"
- class="desktop-menu-link"
+ class={classAttributes}
link-id={id}
onMouseOver={() => this.handleDesktopMenuToggle(id)}
onFocus={() => this.handleDesktopMenuToggle(id)}
@@ -106,18 +112,27 @@ export class HyDesktopMenuLinks {
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
- <a aria-current={label} href={url} class="" menu-link-id={id}>
- <span class="heading-icon-first">
+ <a
+ aria-current={label}
+ href={url}
+ class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
+ menu-link-id={id}
+ >
+ <span class="heading-icon">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
- <span class="hy-menu-item__label">{label}</span>
- <span class="hy-menu-item__description">{description}</span>
+ <span class="label">{label}</span>
+ {description && <span class="description">{description}</span>}
</a>
- <ul class={'desktop-menu first'} menu-link-id={id}>
- {items.map(({label, url, description}) => (
+ <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
+ {items.map(({label, url}) => (
<li>
- <a href={url}>{label}</a>
- <span>{description}</span>
+ <a href={url}>
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ </span>
+ <span class="label">{label}</span>
+ </a>
</li>
))}
</ul>
@@ -141,8 +156,8 @@ export class HyDesktopMenuLinks {
target={target}
aria-label={shortcut_aria_label}
>
- <span class="shortcut-item__label">{shortcut_title}</span>
- <span class="shortcut-item__icon">
+ <span class="label">{shortcut_title}</span>
+ <span class="icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} />
</span>
</a>
@@ -160,7 +175,7 @@ export class HyDesktopMenuLinks {
aria-label="Close menu"
>
<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>