hide menu panel when scroll up to the top

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;

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);
 

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

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;