diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 9eb7456741b0b029fc4796a9c7316bbafb32276d..cfc85ee40a89437a7d09a85ea7f34f7357d943fd 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -1,13 +1,3 @@
-:host(.hy-menu-item--desktop.hy-menu-item--is-active) {
- display: block;
- visibility: visible;
-}
-
-:host(.hy-menu-item--desktop:not(.hy-menu-item--is-active)) {
- display: none;
- visibility: hidden;
-}
-
// Mobile.
:host(.hy-menu-item--mobile) {
--menu-item-display: flex;
@@ -43,12 +33,24 @@
}
// Desktop.
+:host(.hy-menu-item--desktop.hy-menu-item--for-desktop) {
+ display: block;
+ visibility: visible;
+}
+
+:host(.hy-menu-item--desktop:not(.hy-menu-item--for-desktop)) {
+ display: none;
+ visibility: hidden;
+}
+
+/*
:host(.hy-menu-item--desktop.is-hidden) {
height: auto;
visibility: visible !important;
}
+ */
-:host(.hy-menu-item--desktop[depth='1']) {
+:host(.hy-menu-item--for-desktop[depth='1']) {
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
@@ -90,7 +92,8 @@
}
}
}
-:host(.hy-menu-item--desktop[depth='2']) {
+
+:host(.hy-menu-item--for-desktop[depth='2']) {
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
@@ -121,29 +124,40 @@
}
}
-:host(.hy-menu-item--desktop) {
- border: 0 none;
- --menu-item-display: none;
+:host(.hy-menu-item--for-desktop:not([depth='2']):not([depth='1'])) {
+ a {
+ display: none;
+ }
}
-:host(.hy-menu-item--desktop:first-of-type) {
+:host(.hy-menu-item.hy-menu-item--for-desktop) {
border: 0 none;
- --menu-item-display: none;
-}
-
-:host(.hy-menu-item--desktop.hy-menu-item--alternative) {
- @include breakpoint($medium) {
- @include font-size(14px, 14px);
+ //--menu-item-display: none;
+ a {
@include font-weight($bold);
- border-top: 0 none;
- }
+ align-items: center;
+ color: var(--brand-main-nearly-black);
+ display: flex;
+ font-family: var(--main-font-family);
+ text-decoration: none;
+ width: 100%;
- @include breakpoint($extrawide) {
- @include font-size(16px, 16px);
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: -2px;
+ }
+ .hy-menu-item__label {
+ @include breakpoint($extrawide) {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+ }
}
-
- @include breakpoint($overwide) {
- @include font-size(18px, 18px);
+ a.is-heading {
+ display: none;
+ }
+ button {
+ display: none;
}
}
@@ -178,54 +192,27 @@
visibility: visible;
}
-a {
- @include font-size(15px, 20px);
- @include font-weight($regular);
- align-items: center;
- color: var(--brand-main-nearly-black);
- display: flex;
- font-family: var(--main-font-family);
- padding: 24px 16px;
- text-decoration: none;
- width: 100%;
-
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: -2px;
- }
-
- &.hy-menu-item--mobile {
- background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
- color: var(--brand-main-light);
- padding: 12px 12px 12px 20px;
-
- &.is-active,
- &.in-active-trail {
- @include font-weight($bold);
- color: var(--grayscale-black);
- position: relative;
+:host(.hy-menu-item:not(.hy-menu-item--for-desktop)) {
+ a {
+ @include font-size(15px, 20px);
+ @include font-weight($regular);
+ align-items: center;
+ color: var(--brand-main-nearly-black);
+ display: flex;
+ font-family: var(--main-font-family);
+ padding: 24px 16px;
+ text-decoration: none;
+ width: 100%;
- &:before {
- border-left: 3px solid var(--grayscale-black);
- content: '';
- height: 75%;
- left: 10px;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- }
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: -2px;
}
- &.is-heading {
- @include font-size(24px, 24px);
- @include font-weight($bold);
- background: transparent;
- border-bottom: 3px solid var(--brand-main-light);
+ &.hy-menu-item--mobile {
+ background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
color: var(--brand-main-light);
- margin-top: -24px;
- padding-bottom: 24px;
- padding-top: 24px;
- text-transform: uppercase;
+ padding: 12px 12px 12px 20px;
&.is-active,
&.in-active-trail {
@@ -234,148 +221,122 @@ a {
position: relative;
&:before {
- border-left-width: 4px;
- height: 55%;
+ border-left: 3px solid var(--grayscale-black);
+ content: '';
+ height: 75%;
+ left: 10px;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
}
}
- }
- }
-
- &.is-heading {
- display: inherit;
- @include breakpoint($extrawide) {
- display: none;
- }
- }
-
- &.hy-menu-item--desktop {
- @include breakpoint($medium) {
- @include font-size(14px, 14px);
- @include font-weight($bold);
- padding: 10px 15px;
- text-transform: uppercase;
- }
- @include breakpoint($extrawide) {
- @include font-size(15px, 16px);
- padding: 10px 8px;
+ &.is-heading {
+ @include font-size(24px, 24px);
+ @include font-weight($bold);
+ background: transparent;
+ border-bottom: 3px solid var(--brand-main-light);
+ color: var(--brand-main-light);
+ margin-top: -24px;
+ padding-bottom: 24px;
+ padding-top: 24px;
+ text-transform: uppercase;
+
+ &.is-active,
+ &.in-active-trail {
+ @include font-weight($bold);
+ color: var(--grayscale-black);
+ position: relative;
+
+ &:before {
+ border-left-width: 4px;
+ height: 55%;
+ }
+ }
+ }
}
- @include breakpoint($overwide) {
- @include font-size(18px, 16px);
- padding: 10px;
+ &.is-heading {
+ display: inherit;
+ @include breakpoint($extrawide) {
+ display: none;
+ }
}
- .hy-menu-item__label {
- @include breakpoint($medium) {
- border-bottom: 4px solid transparent;
- padding-bottom: 8px;
- padding-top: 7px;
- }
+ &.hy-menu-item--sidenav {
+ @include font-size(18px, 24px);
+ @include font-weight($bold);
+ color: var(--brand-main-light);
+ display: var(--hy-menu-item-sidenav-display);
+ font-family: var(--main-font-family);
+ margin: 10px 0;
+ padding: 8px 0;
- @include breakpoint($extrawide) {
- padding-top: 13px;
+ &:focus {
+ outline-offset: 4px;
}
- @include breakpoint($overwide) {
- padding-top: 12px;
- padding-bottom: 12px;
+ &:hover {
+ color: var(--brand-main-nearly-black);
}
- }
-
- &.in-active-trail {
- .hy-menu-item__label {
- @include breakpoint($medium) {
- border-bottom: 4px solid var(--brand-main-nearly-black);
- padding-bottom: 8px;
- }
- @include breakpoint($extrawide) {
- padding-bottom: 8px;
- padding-top: 14px;
- }
+ &.is-active {
+ color: var(--brand-main-nearly-black);
+ text-decoration: none;
- @include breakpoint($overwide) {
- padding-top: 12px;
- padding-bottom: 12px;
+ .hy-menu-item__label {
+ padding-bottom: 0;
}
}
- }
- }
-
- &.hy-menu-item--sidenav {
- @include font-size(18px, 24px);
- @include font-weight($bold);
- color: var(--brand-main-light);
- display: var(--hy-menu-item-sidenav-display);
- font-family: var(--main-font-family);
- margin: 10px 0;
- padding: 8px 0;
-
- &:focus {
- outline-offset: 4px;
- }
- &:hover {
- color: var(--brand-main-nearly-black);
- }
+ &.is-active--heading {
+ @include font-size(26px, 40px);
+ color: var(--brand-main-nearly-black);
+ text-transform: uppercase;
- &.is-active {
- color: var(--brand-main-nearly-black);
- text-decoration: none;
+ .hy-menu-item__label {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ padding: 0;
- .hy-menu-item__label {
- padding-bottom: 0;
+ &__icon {
+ display: none;
+ }
+ }
}
- }
- &.is-active--heading {
- @include font-size(26px, 40px);
- color: var(--brand-main-nearly-black);
- text-transform: uppercase;
+ &.is-active--child {
+ color: var(--brand-main-light);
+ text-decoration: none;
+ }
- .hy-menu-item__label {
- border-bottom: 4px solid var(--brand-main-nearly-black);
- padding: 0;
+ .hy-menu-item__label__icon {
+ color: var(--brand-main-light);
+ display: inline-block;
+ padding-left: 5px;
- &__icon {
+ .is-active & {
display: none;
}
}
- }
- &.is-active--child {
- color: var(--brand-main-light);
- text-decoration: none;
- }
+ &.is-parent {
+ @include font-size(16px, 22px);
+ @include font-weight($semibold);
+ align-items: center;
+ color: var(--brand-main-light);
+ display: flex;
+ text-decoration: none;
- .hy-menu-item__label__icon {
- color: var(--brand-main-light);
- display: inline-block;
- padding-left: 5px;
-
- .is-active & {
- display: none;
- }
- }
-
- &.is-parent {
- @include font-size(16px, 22px);
- @include font-weight($semibold);
- align-items: center;
- color: var(--brand-main-light);
- display: flex;
- text-decoration: none;
-
- &:hover {
- color: var(--brand-main-nearly-black);
- .hy-menu-item__label__icon {
+ &:hover {
color: var(--brand-main-nearly-black);
+ .hy-menu-item__label__icon {
+ color: var(--brand-main-nearly-black);
+ }
}
- }
- .hy-menu-item__label__icon {
- margin-right: 8px;
+ .hy-menu-item__label__icon {
+ margin-right: 8px;
+ }
}
}
}
diff --git a/src/components/navigation/menu-level-container/menu-level-container.tsx b/src/components/navigation/menu-level-container/menu-level-container.tsx
index ec25ffff57debd5610e2eb84300390d48a94a7bd..b58375acc9aa716866284d1c394393a6f540e2ce 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.tsx
+++ b/src/components/navigation/menu-level-container/menu-level-container.tsx
@@ -59,6 +59,16 @@ export class MenuLevelContainer {
componentWillUpdate() {
// Pass the menu type and menu-button-submenu-expand attributes to
// the child menu item component.
+ /*
+ let hyMenu = this.el.closest('hy-menu');
+ if (hyMenu) {
+ if (hyMenu.menuType==MenuType.desktop) {
+ console.log(hyMenu.menuType);
+ this.menuType = MenuType.desktop;
+ }
+ }
+ */
+
if (this.menuType) {
const items = Array.from(this.el.children);
items.forEach((item) => {
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 4c6ad3044df073d13675e0f12e3ff66b3c3b4845..dd403868da808a59fa37ffe3585e22ee7f3ae7ad 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
@@ -62,7 +62,6 @@
display: none;
&--is-active {
- border: 1px solid red;
background-color: var(--grayscale-white);
display: flex;
flex-direction: row;
@@ -70,7 +69,7 @@
opacity: 1;
position: absolute;
left: 0;
- top: 90px;
+ top: 104px;
width: 100%;
z-index: 510;
}
@@ -87,3 +86,27 @@
top: 10px;
}
}
+
+/*
+apply to desktop menu links upper level
+ &.hy-menu-item--desktop {
+ &.in-active-trail {
+ .hy-menu-item__label {
+ @include breakpoint($medium) {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ padding-bottom: 8px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-bottom: 8px;
+ padding-top: 14px;
+ }
+
+ @include breakpoint($overwide) {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+ }
+ }
+ }
+ */
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 23c4c40e3e98ca0da0d602a7fb35d173d55c5d31..1bbb1df52afc6cbca7cd44cc103e906ebbd6a4a4 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
@@ -42,7 +42,12 @@ export class HyDesktopMenuLinks {
// 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"]');
+ let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
+ menuItems.forEach((item) => {
+ (item as HTMLElement).classList.remove('hy-menu-item--for-desktop');
+ });
+
+ let parentMenu = document.querySelectorAll('hy-site-header hy-menu-level-container[menu-level="2"]');
if (parentMenu) {
const items = Array.from(parentMenu);
items.forEach((item) => {
@@ -78,19 +83,20 @@ export class HyDesktopMenuLinks {
// Hide all menu-item that have other menu-link-id attribute value.
let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
menuItems.forEach((item) => {
- (item as HTMLElement).classList.remove('hy-menu-item--is-active');
+ (item as HTMLElement).classList.remove('hy-menu-item--for-desktop');
});
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');
+ (menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--for-desktop');
let parentMenu = (menuActivatedItems[0] as HTMLElement).querySelector('hy-menu-level-container[menu-level="2"]');
if (parentMenu && parentMenu.children) {
(parentMenu as HTMLElement).classList.remove('hy-menu-level-container--mobile');
(parentMenu as HTMLElement).classList.add('hy-menu-level-container--desktop');
+
const items = Array.from(parentMenu.children);
items.forEach((item) => {
- item.classList.add('hy-menu-item--is-active');
+ item.classList.add('hy-menu-item--for-desktop');
});
}
}