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 09c53f62f90ff3ba35660c844856858195526efd..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,11 +3,7 @@
}
.hy-site-header {
- // nav
- &__menu-desktop {
- }
-
- // ul
+ // 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;
@@ -38,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);
@@ -53,6 +46,11 @@
}
}
+ &__heading__icon {
+ display: none;
+ }
+
+ // On hover: change background and show heading icon.
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
@@ -119,12 +117,12 @@
position: relative;
// first level link inside panel
- a.menu-item-first-level-link {
+ &__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%;
@@ -147,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);
@@ -178,7 +175,7 @@
}
// menu item links
- ul.desktop-menu {
+ &__second-level-menu {
background-color: var(--grayscale-background-box);
list-style: none;
margin: 0;
@@ -215,7 +212,7 @@
outline-offset: -2px;
}
- .hy-menu-item__label {
+ .label {
@include breakpoint($extrawide) {
border: none;
margin-left: 12px;
@@ -224,7 +221,7 @@
}
}
- span.heading-icon-second {
+ span.heading-icon {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
@@ -240,16 +237,18 @@
// Shortcuts
.shortcuts-panel {
+ list-style: none;
+
&__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 {
@@ -266,214 +265,12 @@
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);
- 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;
- }
- }
- }
- }
- }
- }
-}
-
-.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;
- }
-
- &__desktop-menu {
- position: relative;
- left: 120px;
- width: 50%;
-
- ul {
- 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%;
-
- &: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;
- background-color: var(--grayscale-background-box);
- flex-direction: column;
- 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;
- }
- .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 {
+ .icon {
position: absolute;
- top: 12px;
- left: -6px;
-
- @include breakpoint($fullhd) {
- top: 27px;
- }
-
+ right: 0;
svg {
- background-color: var(--brand-main-light);
- fill: var(--grayscale-white);
- padding: 8px;
- }
- }
- }
- }
-
- 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;
- }
-
- @include breakpoint($fullhd) {
- @include font-size(18px, 22px);
- letter-spacing: -0.56px;
- }
-
- .hy-menu-item__label {
- border: none;
- margin-left: 12px;
- }
-
- span.heading-icon-second {
- svg {
- fill: var(--brand-main-light);
- @include breakpoint($extrawide) {
- padding: 1px 0;
- }
+ padding: 4px;
}
}
}
@@ -481,4 +278,3 @@
}
}
}
-*/
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 3ed7f5ac467aaf0f18ac88c100de1a70eb6805df..2e489aa6ca700d01a626985cf0377ebcd05d7586 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
@@ -107,21 +107,26 @@ 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-item-first-level-link" 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}>
+ <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
{items.map(({label, url}) => (
<li>
<a href={url}>
- <span class="heading-icon-second">
+ <span class="heading-icon">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
- <span class="hy-menu-item__label">{label}</span>
+ <span class="label">{label}</span>
</a>
</li>
))}
@@ -146,8 +151,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>