From 8c79efc2ca13c7f6de0f2231e24ace864217be48 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 8 Mar 2021 10:21:53 +0200
Subject: [PATCH] Add backdrop overlay when panel open
---
src/components.d.ts | 2 ++
.../hy-menu-main-group/hy-menu-main-group.scss | 2 +-
.../hy-menu-main-group/hy-menu-main-group.tsx | 2 ++
.../navigation/hy-menu-main-group/readme.md | 1 +
src/components/site-header/readme.md | 11 ++++++-----
src/components/site-header/site-header.tsx | 8 +++++++-
6 files changed, 19 insertions(+), 7 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 1ae996ab..b97fb431 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2019,6 +2019,7 @@ declare namespace LocalJSX {
isMobile?: boolean;
logoLabel?: string;
logoUrl?: string;
+ onMobileMenuTopToggle?: (event: CustomEvent<any>) => void;
onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
siteLabel?: string;
siteUrl?: string;
@@ -2185,6 +2186,7 @@ declare namespace LocalJSX {
onHeaderScrollDown?: (event: CustomEvent<any>) => void;
onHeaderScrollUp?: (event: CustomEvent<any>) => void;
onMenuMobileToggled?: (event: CustomEvent<any>) => void;
+ onMenuMobileTopToggled?: (event: CustomEvent<any>) => void;
siteLabel?: string;
siteUrl?: string;
}
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index fdb4b550..614b85d6 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -275,7 +275,7 @@
display: flex;
flex-direction: column;
justify-items: space-between;
- max-width: 350px;
+ max-width: 400px;
overflow: hidden;
padding: 0px;
place-items: stretch;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 31914440..8f336577 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -33,6 +33,7 @@ export class HyMenuMainGroup {
@State() isMenuOpen: boolean = false;
@Event() universityMainMenuToggled: EventEmitter;
+ @Event() mobileMenuTopToggle: EventEmitter;
private _dataMainMenu: MainMenu[];
@@ -43,6 +44,7 @@ export class HyMenuMainGroup {
@Listen('click')
handleComponentClick(event) {
+ this.mobileMenuTopToggle.emit();
this.isMenuOpen = !this.isMenuOpen;
if (this.isMenuOpen) {
diff --git a/src/components/navigation/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
index 122597d8..e29a25c5 100644
--- a/src/components/navigation/hy-menu-main-group/readme.md
+++ b/src/components/navigation/hy-menu-main-group/readme.md
@@ -18,6 +18,7 @@
| Event | Description | Type |
| --------------------------- | ----------- | ------------------ |
+| `mobileMenuTopToggle` | | `CustomEvent<any>` |
| `universityMainMenuToggled` | | `CustomEvent<any>` |
## Dependencies
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index daa64e38..c656f997 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -25,11 +25,12 @@
## Events
-| Event | Description | Type |
-| ------------------- | ----------- | ------------------ |
-| `headerScrollDown` | | `CustomEvent<any>` |
-| `headerScrollUp` | | `CustomEvent<any>` |
-| `menuMobileToggled` | | `CustomEvent<any>` |
+| Event | Description | Type |
+| ---------------------- | ----------- | ------------------ |
+| `headerScrollDown` | | `CustomEvent<any>` |
+| `headerScrollUp` | | `CustomEvent<any>` |
+| `menuMobileToggled` | | `CustomEvent<any>` |
+| `menuMobileTopToggled` | | `CustomEvent<any>` |
## Dependencies
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 433c6922..35870133 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -52,6 +52,7 @@ export class SiteHeader {
@Event() headerScrollUp: EventEmitter;
@Event() headerScrollDown: EventEmitter;
@Event() menuMobileToggled: EventEmitter;
+ @Event() menuMobileTopToggled: EventEmitter;
private ro: ResizeObserver;
private donateLink: DonateLink[];
@@ -71,6 +72,12 @@ export class SiteHeader {
this.menuMobileToggled.emit();
}
+ // Listener for toggling mobile menu top panel on or off.
+ @Listen('mobileMenuTopToggle') mobileMenuTopToggle() {
+ this.isMenuOpen = !this.isMenuOpen;
+ this.menuMobileTopToggled.emit();
+ }
+
@Listen('scroll', {target: 'window'})
handleScroll() {
if (this.el.getAttribute('menu-type') === 'desktop') {
@@ -221,7 +228,6 @@ export class SiteHeader {
const logoColor = ColorVariant.black;
const logoColorGroup = ColorVariant.white;
let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
-
switch (this.menuType) {
case MenuType.desktop:
// Larger than 1200px screens
--
GitLab