From b4a1eb51223f9ccffa1c500c8386a534c939e778 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Wed, 20 Jan 2021 11:01:06 +0200
Subject: [PATCH] Menu label next to hamburger in top nav in 960-1200px display
---
src/components.d.ts | 2 ++
.../hy-desktop-menu-links/hy-desktop-menu-links.scss | 2 +-
src/components/site-header/readme.md | 1 +
src/components/site-header/site-header.scss | 11 +++++++++++
src/components/site-header/site-header.tsx | 9 +++++++++
src/global/_breakpoints.scss | 1 +
src/utils/utils.ts | 2 +-
7 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index a2df908d..e6a93069 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 40d47256..6ea5f7d3 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 fb281a59..3436d38d 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 46f01ee1..b43a3eb2 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 e2f2f6b2..d6dec401 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 98c483e2..b7dd4b7a 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 c285a372..f34e08dc 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',
}
--
GitLab