Hides menu after a delay. Shows menu while scrolling.

src/app/app.component.html

@@ -7,7 +7,8 @@
     fxLayout="column"
     fxLayoutGap="20px"
     fxLayoutAlign="center end"
-  >
+    [ngClass]="{'scrolling': isScrolling}"
+ >
     <a
       *ngFor="let link of menuLinks"
       mat-button
@@ -16,8 +17,7 @@
       (click)="onMenuClick(link.id)"
       [ngClass]="{'active': currentSection === link.id}"
       id="{{link.id}}_menu_link"
-      >{{ link.label }}</a
+    >{{ link.label }}</a>
-    >
     <div id="selected_indicator" [ngStyle]="{'top.px': activeLinkTop, 'opacity': showIndicator ? 1 : 0}"></div>
   </div>
 

src/app/app.component.scss

@@ -3,12 +3,17 @@
 #menu {
   position: fixed;
   top: 0;
-  right: 0;
+  right: -300px;
   z-index: 100;
   height: 100vh;
   width: 300px;
   background-color: rgba(255, 255, 255, 0.8);
   padding: 80px;
+  transition: all 1s ease-in-out;
+
+  &.scrolling {
+    right: 0px;
+  }
 
   a {
     transition: all 1s ease-in-out 0.5s;

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren} from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, QueryList, ViewChildren} from '@angular/core';
 import {HeaderComponent} from './header/header.component';
 import {WelcomeComponent} from './welcome/welcome.component';
 import {AboutUsComponent} from './about-us/about-us.component';
@@ -35,8 +35,10 @@ export class AppComponent implements AfterViewInit {
   currentSection = 'header';
   activeLinkTop: number;
   showIndicator = false;
+  isScrolling = false;
+  scrollTimer = -1;
 
-  constructor() {
+  constructor(private changeDetector: ChangeDetectorRef) {
   }
 
   ngAfterViewInit() {
@@ -56,10 +58,25 @@ export class AppComponent implements AfterViewInit {
   onSectionChange(sectionId: string) {
     this.currentSection = sectionId;
     this.moveSelectedIndicator(this.currentSection);
-    console.log('section change to:', sectionId);
   }
 
   scrollTo(section) {
     document.querySelector('#' + section).scrollIntoView();
   }
+
+  @HostListener('window:scroll')
+  onScroll() {
+    this.isScrolling = true;
+    if (this.scrollTimer !== -1) {
+      clearTimeout(this.scrollTimer);
+    }
+
+    this.scrollTimer = setTimeout(() => {
+      this.showIndicator = true;
+      this.isScrolling = false;
+      this.scrollTimer = -1;
+      this.changeDetector.detectChanges();
+    }, 2000);
+  }
+
 }