diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 7565c7fee10306a27499659ef1f0676152444373..8765b635f3b6c732a8b00110968b66318bc112e9 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -13,16 +13,33 @@
:host(.menu--language:not([is-mobile])) {
@include breakpoint($narrow) {
+ height: 100%;
position: relative;
right: auto;
top: auto;
}
}
+:host(.menu--language__is-open) {
+ &::after {
+ @include breakpoint($wide) {
+ content: ' ';
+ height: 4px;
+ background-color: var(--grayscale-black);
+ display: block;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ //bottom: -24px;
+ //left: 0;
+ }
+ }
+}
+
.menu--language__toggle {
@include font-size(14px, 24px);
align-items: center;
- background: transparent;
+ background: var(--grayscale-white);
border: 0 none;
color: var(--brand-main-nearly-black);
display: flex;
@@ -58,20 +75,20 @@
.menu--language__toggle__caret {
transform: rotate(180deg);
}
- background-color: var(--grayscale-background-box);
+ //background-color: var(--grayscale-background-box);
@include breakpoint($wide) {
- margin-bottom: -28px;
- margin-top: -26px;
- padding: 26px 8px 28px;
+ //margin-bottom: -28px;
+ //margin-top: -26px;
+ //padding: 26px 8px 28px;
}
@include breakpoint($extrawide) {
- margin-bottom: -38px;
- margin-top: -26px;
- padding: 26px 8px 38px;
+ //margin-bottom: -38px;
+ //margin-top: -26px;
+ //padding: 26px 8px 38px;
}
@include breakpoint($xlarge) {
- margin-bottom: -50px;
- padding: 26px 12px 50px;
+ //margin-bottom: -50px;
+ //padding: 26px 12px 50px;
}
}
@@ -84,36 +101,37 @@
}
.menu--language__dropdown {
- background-color: var(--grayscale-white);
- border-radius: 0 0 5px 5px;
- box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
- display: flex;
- flex-flow: column;
- justify-items: center;
- margin: 0;
- padding: 15px;
- position: absolute;
- right: 5px;
- text-transform: uppercase;
- top: 40px;
+ display: none;
visibility: hidden;
- @include breakpoint($wide) {
- padding: 32px 0 0;
- top: 70px;
- }
- @include breakpoint($extrawide) {
- top: 80px;
- }
- @include breakpoint($xlarge) {
- top: 90px;
- }
-
&.is-open {
+ background-color: var(--grayscale-white);
+ border-radius: 0 0 5px 5px;
+ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-flow: column;
+ justify-items: center;
+ left: -15px;
+ margin: 0;
+ padding: 15px;
+ position: absolute;
+ text-transform: uppercase;
visibility: visible;
+ width: max-content;
z-index: 100;
+ @include breakpoint($wide) {
+ //@todo check side paddings
+ left: -32px;
+ padding: 32px 0 0;
+ }
+ @include breakpoint($xlarge) {
+ left: -40px;
+ padding: 40px 0 0;
+ }
+
a {
+ //@todo check fonts
@include font-size(16px, 20px);
margin-left: 0;
}
@@ -135,6 +153,7 @@
}
}
+/*
.hy-menu-backdrop {
bottom: 0;
left: 0;
@@ -150,3 +169,4 @@
z-index: 99;
}
}
+*/
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 6af1f0e7d552ec7a62012bb43ea20b13dc12ff40..8d21244309c15eb2e1c72f33916bef01e0bf0fa5 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -32,9 +32,18 @@ export class MenuLanguage {
this._labels = typeof data === 'string' ? JSON.parse(data) : data;
}
+ @Listen('languageMenuLeave') languageMenuLeave() {
+ console.log('leave');
+ this.isMenuOpen = false;
+ console.log(this.isMenuOpen);
+ }
+
@Listen('languageMenuToggle') languageMenuToggle() {
+ console.log('Toggle');
this.isMenuOpen = !this.isMenuOpen;
+ console.log(this.isMenuOpen);
+ /*
let hyHeader = this.el.closest('.hy-site-header');
let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
@@ -47,19 +56,47 @@ export class MenuLanguage {
(hyBackdropDiv as HTMLElement).style.top = '0';
}
}
+ */
}
@Listen('click')
handleComponentClick(event) {
+ console.log('Click');
+ this.isMenuOpen = !this.isMenuOpen;
+ console.log(this.isMenuOpen);
+ const languageMenuSelector = event.target as HTMLElement;
+ //alert(languageMenuSelector.tagName);
+ if (this.isMenuOpen) {
+ let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+ const headerHeight = `${
+ languageMenuSelector.offsetHeight +
+ hyHeader.offsetTop +
+ hyHeader.offsetHeight +
+ 8 -
+ languageMenuSelector.offsetTop -
+ languageMenuSelector.offsetHeight
+ }px`;
+ const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
+ `.menu--language__dropdown`
+ )[0] as HTMLElement;
+ languagePanel.style.top = headerHeight;
+ }
event.stopPropagation();
}
@Listen('click', {target: 'window'})
handleClick(event) {
+ /*
+ alert('window');
+ alert((event.target as HTMLTextAreaElement).tagName.toLowerCase());
if (this.isMenuOpen) {
const target = event.target as HTMLTextAreaElement;
const targetElement = target.tagName.toLowerCase();
+ console.log(targetElement);
+
+ */
+ /*
if (targetElement !== 'hy-menu-language') {
const hyHeader = this.el.closest('.hy-site-header');
const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
@@ -70,7 +107,8 @@ export class MenuLanguage {
this.isMenuOpen = !this.isMenuOpen;
}
}
- }
+ */
+ //}
event.stopPropagation();
}
@@ -81,7 +119,6 @@ export class MenuLanguage {
render() {
const black = 'var(--brand-main-nearly-black)';
- const menuLanguageContainerClass = ['menu--language'].join(' ');
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -99,9 +136,17 @@ export class MenuLanguage {
})}
</Host>
) : (
- <Host class={menuLanguageContainerClass}>
+ <Host
+ onMouseLeave={() => this.languageMenuLeave()}
+ class={{
+ 'menu--language': true,
+ 'menu--language__is-open': this.isMenuOpen,
+ }}
+ >
<button
- onClick={() => this.languageMenuToggle()}
+ //onClick={() => this.languageMenuToggle()}
+ //onMouseOver={() => this.languageMenuToggle()}
+ //onFocus={() => this.languageMenuToggle()}
class={{
'menu--language__toggle': true,
'is-open': this.isMenuOpen,
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 0f86cd9b3ec902eb941237bf632c097bb0dbe4ab..e0f2acc0624adc698781c7d004c45bc64af5596b 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
@@ -5,20 +5,29 @@
justify-content: center;
margin: 0 32px;
padding: 0;
+ height: 100%;
}
.hy-site-header {
+ &__menu-desktop {
+ height: 100%;
+ }
// 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-direction: row;
flex-flow: row;
+ height: 100%;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
+ li {
+ display: flex;
+ height: 100%;
+ }
// First level menu items
.desktop-menu-link {
background-color: transparent;
@@ -48,21 +57,21 @@
padding: 0 9px;
}
- // Underline if link is in active trail.
- &--is-active-trail::after {
- border-bottom: 4px solid var(--brand-main-nearly-black);
- bottom: -12px;
- content: ' ';
- position: absolute;
- right: 0;
- width: 100%;
- }
-
&__label {
+ position: relative;
width: min-content;
@include breakpoint($xlarge) {
width: 100%;
}
+
+ &--is-active-trail::after {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ bottom: -12px;
+ content: ' ';
+ position: absolute;
+ right: 0;
+ width: 100%;
+ }
}
hy-icon {
@@ -100,6 +109,20 @@
}
}
}
+
+ .desktop-menu-link__label--is-active-trail::after {
+ border: none;
+ }
+ }
+
+ // Underline active link when showing menu panel
+ &--is-active::after {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ bottom: 0;
+ content: ' ';
+ position: absolute;
+ right: 0;
+ width: 100%;
}
}
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 2eecceed992a50800d7d551063132b2429244151..752d7ac6101c10007be9d24fd668161fe42405e6 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
@@ -50,23 +50,12 @@ export class HyDesktopMenuLinks {
this.dataDesktopLinksWatcher(this.dataDesktopLinks);
}
- /*
- @Listen('resize', {target: 'window'})
- resizeEventListener(event) {
- if (!event) return;
-
- const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
- if (breadcrumbsElement) {
- if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
- this.adjustBreadcrumbsMenuVisibility(true);
- } else {
- this.adjustBreadcrumbsMenuVisibility(false);
- }
- }
- }
- */
-
showBackdropShadow(state = 'close', top = 0) {
+ if (state === 'open') {
+ }
+ if (top == 0) {
+ }
+ /*
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
@@ -81,6 +70,7 @@ export class HyDesktopMenuLinks {
hyBackdropDiv.style.top = '0';
}
}
+ */
}
handleDesktopMenuClose() {
@@ -148,6 +138,8 @@ export class HyDesktopMenuLinks {
const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin;
activeMenuItemSibling.style.paddingLeft = `${menuPanelLeftPosition}px`;
+ // @todo Position underline block under the activated top menu item.
+
// Position shortcuts block.
let shortcutsDiv = activeMenuItemSibling.querySelectorAll('ul.shortcuts-panel')[0] as HTMLElement; // shortcuts block
if (shortcutsDiv) {
@@ -169,6 +161,8 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuClick(id) {
+ console.log(id);
+ /*
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
const activeMenuItemSibling = activeMenuItem.nextElementSibling as HTMLElement; // current panel
@@ -200,6 +194,7 @@ export class HyDesktopMenuLinks {
this.showBackdropShadow();
}
+ */
}
componentDidLoad() {
@@ -230,6 +225,10 @@ export class HyDesktopMenuLinks {
'desktop-menu-link',
isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
].join(' ');
+ let classAttributesLabel = [
+ 'desktop-menu-link__label',
+ isActive === 'true' ? 'desktop-menu-link__label--is-active-trail' : '',
+ ].join(' ');
menuLinkItems.push(
<li>
@@ -242,7 +241,7 @@ export class HyDesktopMenuLinks {
onFocus={() => this.handleDesktopMenuToggle(id)}
aria-expanded="false"
>
- <span class="desktop-menu-link__label">{label}</span>
+ <span class={classAttributesLabel}>{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 54a7d91d8534644d525d95ac35d7f9455eef4657..9d02224c1eb92f5ebbe59d3c034d2e7c7599d0e4 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -141,31 +141,32 @@
}
.menu--secondary {
+ height: 100%;
+
@include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
margin-right: 0;
+ }
+ @include breakpoint($extrawide) {
+ margin-right: 32px;
+ }
- &__item {
+ &__item {
+ margin: 0 10px;
+ padding: 10px 0;
+
+ @include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
- margin: 0 10px;
- padding: 10px 0;
}
- }
-
- @include breakpoint($extrawide) {
- margin-right: 32px;
- &__item {
+ @include breakpoint($extrawide) {
margin: 0 6px;
padding: 10px 0;
}
- }
-
- @include breakpoint($xlarge) {
- &__item {
+ @include breakpoint($xlarge) {
margin: 0 8px;
padding: 10px 0;
}