From 2bc564d4fcb8b5f75e1f724f7b8d3990692fd60f Mon Sep 17 00:00:00 2001
From: Aaron Louie <aaron@sartography.com>
Date: Mon, 14 Oct 2019 13:29:47 -0400
Subject: [PATCH] Hides menu after a delay. Shows menu while scrolling.

---
 src/app/app.component.html |  6 +++---
 src/app/app.component.scss |  7 ++++++-
 src/app/app.component.ts   | 23 ++++++++++++++++++++---
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0fc2628..5cc4e17 100644
--- a/src/app/app.component.html
+++ b/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>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 2d50725..d4f1c99 100644
--- a/src/app/app.component.scss
+++ b/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;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c157e5f..f7e0df6 100644
--- a/src/app/app.component.ts
+++ b/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);
+  }
+
 }