diff --git a/src/components.d.ts b/src/components.d.ts
index a2df908d1bfafdcacdd14dee11ac6634c8ebf20f..e6a93069112c46fd9150f9b0fc6e8822047a96c2 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -736,6 +736,7 @@ export namespace Components {
dataSiteHeaderLabels: string;
logoLabel?: string;
logoUrl?: string;
+ menuLabel: string;
menuLabelClose?: string;
menuLabelOpen?: string;
menuType: MenuType;
@@ -2032,6 +2033,7 @@ declare namespace LocalJSX {
dataSiteHeaderLabels?: string;
logoLabel?: string;
logoUrl?: string;
+ menuLabel?: string;
menuLabelClose?: string;
menuLabelOpen?: string;
menuType?: MenuType;
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 d4926454f8e54f7e83752fd6a345406397bf2e26..6ea5f7d35e96c7d715b73c1d79ae2435293e8ccb 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
@@ -61,7 +61,7 @@
&__label {
position: relative;
width: min-content;
- @include breakpoint($xlarge) {
+ @include breakpoint($overwide) {
width: 100%;
}
@@ -220,7 +220,7 @@
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
- padding-top: 19px;
+ padding: 25px 32px 20px 32px;
}
.label {
@@ -256,7 +256,7 @@
top: 12px;
left: -6px;
@include breakpoint($xlarge) {
- top: 27px;
+ top: 20px;
}
svg {
background-color: var(--brand-main-light);
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 d1e1221ae5e8340cf50e64a15f9cbb17c06fc01d..03d02953e1a8193670aa1b8ab04d13be35ed65ad 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
@@ -235,6 +235,7 @@ export class HyDesktopMenuLinks {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
+ console.log('leave ' + leaveEvent.clientY + ' ' + headerHeight);
if (leaveEvent.clientY < headerHeight - 4) {
this.closePanel();
}
@@ -242,22 +243,28 @@ export class HyDesktopMenuLinks {
event.stopPropagation();
}
+ /*
+ Close the panel if mouse is moving over the menu label.
+ * */
handleDesktopMenuMove(event, id) {
- let toggleEvent = event as MouseEvent;
-
- const activeMenuItem = this.el.shadowRoot.querySelector(
- `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
- ) as HTMLElement;
- let topBorder = activeMenuItem.getClientRects()[0].top;
-
- if (this.currenOpenMenuId == id) {
- // Mouse moving around the same menu link
- if (toggleEvent.clientY < topBorder) {
- this.closePanel();
+ if (this.isDesktopMenuOpen) {
+ let moveEvent = event as MouseEvent;
+
+ const activeMenuItem = this.el.shadowRoot.querySelector(
+ `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
+ ) as HTMLElement;
+ let topBorder = activeMenuItem.getClientRects()[0].top;
+
+ if (this.currenOpenMenuId == id) {
+ // Mouse moving around the same menu link
+ if (moveEvent.clientY < topBorder - 8) {
+ console.log(topBorder + ' ' + moveEvent.clientY);
+ this.closePanel();
+ }
}
- }
- event.stopPropagation();
+ event.stopPropagation();
+ }
}
handleDesktopMenuFocus(event, id) {
@@ -322,18 +329,13 @@ export class HyDesktopMenuLinks {
onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
- onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
aria-expanded="false"
>
<span class={classAttributesLabel}>{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
- <div
- class="hy-desktop-menu-panel"
- onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
- aria-hidden="true"
- >
+ <div class="hy-desktop-menu-panel" aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
<div class="hy-desktop-menu-panel__desktop-menu__menu-items">
<a
@@ -418,7 +420,11 @@ export class HyDesktopMenuLinks {
render() {
return (
- <nav role={'navigation'} class="hy-site-header__menu-desktop">
+ <nav
+ role={'navigation'}
+ class="hy-site-header__menu-desktop"
+ onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
+ >
<ul class="hy-site-header__menu-desktop-container">{this.menuLinkItems}</ul>
</nav>
);
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index fb281a59b339570530fc72b85daa3f351537e71c..3436d38d4374540bb1aa4295fb77fd3e733b0e2c 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -12,6 +12,7 @@
| `dataSiteHeaderLabels` | `data-site-header-labels` | | `string` | `undefined` |
| `logoLabel` | `logo-label` | | `string` | `undefined` |
| `logoUrl` | `logo-url` | | `string` | `undefined` |
+| `menuLabel` | `menu-label` | | `string` | `'Menu'` |
| `menuLabelClose` | `menu-label-close` | | `string` | `undefined` |
| `menuLabelOpen` | `menu-label-open` | | `string` | `undefined` |
| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.default` |
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 46f01ee176b5ff01d5448bd7bb777e36b3db7eef..e55a3ac5a0f27f4f2ac02349cb57e83140b5a882 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -101,6 +101,9 @@
@include breakpoint($narrow) {
padding: 15px 28px 15px 15px;
}
+ @include breakpoint($wide) {
+ padding: 15px 28px 15px 6px;
+ }
&.is-open {
position: fixed;
@@ -139,6 +142,15 @@
}
}
}
+
+ &__menu-label {
+ @include font-size(14px, 24px);
+ @include font-weight($bold);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.45px;
+ padding-right: 2px;
+ text-transform: uppercase;
+ }
}
.hy-backdrop {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index e2f2f6b299c4e2e53fed55b4d7ed6f72b28d6980..d6dec40165ac7f86f582216791674c1586c41b4a 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -30,6 +30,7 @@ export class SiteHeader {
@Prop() dataSiteHeaderLabels: string;
@Prop() logoUrl?: string;
@Prop() logoLabel?: string;
+ @Prop() menuLabel: string = 'Menu';
@Prop() menuLabelOpen?: string;
@Prop() menuLabelClose?: string;
@Prop({reflect: true}) menuType: MenuType = MenuType.default;
@@ -241,6 +242,14 @@ export class SiteHeader {
})}
</div>
<div class={'hy-site-header__menu-container'}>
+ <span
+ class={{
+ 'hy-site-header__menu-label': true,
+ 'is-visible': this.isMenuOpen,
+ }}
+ >
+ {this.menuLabel}
+ </span>
<button
onClick={() => this.mobileMenuToggle()}
class={{
diff --git a/src/global/_breakpoints.scss b/src/global/_breakpoints.scss
index 98c483e29a9d9cc6ed0fec600fbde3b169edcb2a..b7dd4b7a0652593dbd1eb11a0b5dedaf00a78107 100644
--- a/src/global/_breakpoints.scss
+++ b/src/global/_breakpoints.scss
@@ -10,6 +10,7 @@ $narrow: 30rem; // 480px 480-767
$medium: 48rem; // 768px 768-959
$wide: 60rem; // 960px-1200px; small
$extrawide: 75.0625rem; // 1201px-1440px; mid-size
+$overwide: 90.063rem; // 1441px-1600px; large-size
$xlarge: 1601px; //1601px-1920px, x-large
$fullhd: 120.0625rem; // 1921px
$max-width: $extrawide;
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index c285a372fdfd3e9a8430507e602f6970e27d28fc..f34e08dcf2543ad36d408c5d89581151b7b237fc 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -161,7 +161,7 @@ export enum MenuType {
sidenav = 'sidenav',
sidepanel = 'sidepanel',
mobile = 'mobile',
- tablet = 'tabled',
+ tablet = 'tablet',
default = 'desktop',
}