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 40d472562ffd7dcd8db899779b2942f847bfd402..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%; } 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..b43a3eb2066386a888b5286df6528df116df1ba0 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,14 @@ } } } + + &__menu-label { + @include font-size(14px, 24px); + @include font-weight($bold); + 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', }