From 108c8b883d77c568a0ad3e391ed49b9d05e7412c Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 25 Jan 2021 17:38:28 +0200
Subject: [PATCH] hide menu panel when scroll up to the top
---
src/components.d.ts | 1 +
.../hy-desktop-menu-links/hy-desktop-menu-links.tsx | 7 +++++++
src/components/site-header/readme.md | 6 ++++++
src/components/site-header/site-header.tsx | 10 +++++++---
4 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 668ae9da..ed8f66b6 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2039,6 +2039,7 @@ declare namespace LocalJSX {
menuLabelClose?: string;
menuLabelOpen?: string;
menuType?: MenuType;
+ onHeaderScrollUp?: (event: CustomEvent<any>) => void;
}
interface HySiteLogo {
color?: ColorVariant;
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 3b0dcc67..35bd9d81 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
@@ -231,6 +231,13 @@ export class HyDesktopMenuLinks {
this.closePanel(fadeOut);
}
+ // CLose the desktop menu panel if user scrolls Sticky Header till the very top.
+ @Listen('headerScrollUp', {target: 'document'})
+ headerScrollUp() {
+ let fadeOut = false;
+ this.closePanel(fadeOut);
+ }
+
handleDesktopMenuEnter(event, id) {
clearTimeout(this._fadeOutTimer);
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 3436d38d..b1e105e5 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -17,6 +17,12 @@
| `menuLabelOpen` | `menu-label-open` | | `string` | `undefined` |
| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.default` |
+## Events
+
+| Event | Description | Type |
+| ---------------- | ----------- | ------------------ |
+| `headerScrollUp` | | `CustomEvent<any>` |
+
## Dependencies
### Depends on
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index d6dec401..3cb0d93b 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -14,7 +14,7 @@ export interface ComponentLabels {
label?: string;
}
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, h, Listen, Prop, State} from '@stencil/core';
import ResizeObserver from 'resize-observer-polyfill';
import {MenuType, ColorVariant, SiteLogoSize} from '../../utils/utils';
@@ -41,6 +41,8 @@ export class SiteHeader {
@State() isMobile: boolean;
@State() isMenuOpen: boolean = false;
@State() isDesktopMenuOpen: boolean = false;
+
+ @Event() headerScrollUp: EventEmitter;
private ro: ResizeObserver;
private donateLink: DonateLink[];
private menuLabels: ComponentLabels[];
@@ -131,7 +133,6 @@ export class SiteHeader {
// If current position > last position AND scrolled past navbar...
if (st > this.lastScrollTop && st > this.navbarHeight) {
// Scroll Down
-
hySiteHeader.classList.add('hy-site-header--sticky-active');
hySiteHeader.classList.add('hy-site-header--sticky-hidden');
hySiteHeader.classList.remove('hy-site-header--sticky-visible');
@@ -141,10 +142,13 @@ export class SiteHeader {
hySiteHeader.classList.remove('hy-site-header--sticky-active');
hySiteHeader.classList.remove('hy-site-header--sticky-visible');
hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
+
+ // Close desktop menu panel if it's open.
+ this.headerScrollUp.emit();
} else {
hySiteHeader.classList.add('hy-site-header--sticky-active');
- hySiteHeader.classList.add('hy-site-header--sticky-visible');
hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
+ hySiteHeader.classList.add('hy-site-header--sticky-visible');
}
}
this.lastScrollTop = st;
--
GitLab