Hide the side navigation bar for wep application

Question

I created an Angular 4 web application. And I want my navigator to be automatically hidden when I move the mouse. There is an example that I want to use https://codepen.io/JFarrow/pen/fFrpg . I have read several docs on the Internet, but I still can’t figure out how .. Here is my navmenu.component.html code:

<meta http-equiv="pragma" content="no-cache" />

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="jquery-1.8.3.js"></script>

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span  (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse' >
                <ul class='nav navbar-nav'>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/home']">
                            <span class='glyphicon glyphicon-home'></span> Home
                        </a>
                    </li>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/login']">
                            <span class='glyphicon glyphicon-log-in'></span> Log In
                        </a>
                    </li>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/margin']">
                            <span class='glyphicon glyphicon-list'></span> Report
                        </a>
                    </li>
                    <li [routerLinkActive]="['link-active']">
                        <a [routerLink]="['/smart-table']">
                            <span class='glyphicon glyphicon-list'></span> Smart table
                        </a>
                    </li>
                </ul>
</div>
    </div>
</div>

And my navmenu.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
    public isCollapsed: boolean = false;

    public collapsed(event: any): void {
        console.log(event);
    }

    public expanded(event: any): void {
        console.log(event);
    }
}

And my navmenu.component.css:

li .glyphicon {
    margin-right: 10px;
}

/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
    background-color: #4189C7;
    color: white;
}

/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    /* On small screens, convert the nav menu to a vertical sidebar */
    .main-nav {
        height: 100%;
        width: calc(25% - 20px);
    }
    .navbar {
        border-radius: 0px;
        border-width: 0px;
        height: 100%;
    }
    .navbar-header {
        float: none;
    }
    .navbar-collapse {
        border-top: 1px solid #444;
        padding: 0px;
    }
    .navbar ul {
        float: none;
    }
    .navbar li {
        float: none;
        font-size: 15px;
        margin: 6px;
    }
    .navbar li a {
        padding: 10px 16px;
        border-radius: 4px;
    }
    .navbar a {
        /* If a menu item text is too long, truncate it */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

And I'm not sure where I should add the code. There are online codes about adding a js function or using some buid in the bootstrap function, it just doesn't work for me ....

Appreciate your help.

Answer 1

, . , / . , navbar , - .

<navbar-component></navbar-component> 
<content-component></content-component>

, , ( , , ). debounce timeout . - :

<content-component (scroll)="scrollFunction()"></content-component>  

.... and then somewhere in the code for the component that hosts both the navbar and content ...   

timeout: any;
isScrolling: boolean = false;

scrollFunction() : void { 
   this.isScrolling = true;
   clearTimeout(this.timeout);
   this.timeout = setTimeout(()=> {
      this.isScrolling = false
   }, 1000);
}

1000 - , , , isScrolling true , , reset false . clearTimeout , reset 0, . , navbar, , isScrolling , .

<navbar-component [class.navbar-hidden]="isScrolling"></navbar-component>
<content-component (scroll)="scrollFunction()"></content-component>

, , DOM. jQuery . , , , . ,

(scroll)="scrollFunction()"

to

(window:scroll)="scrollFunction()"

- , (.. navbar), HostListener . () HTML, -:

import { Component, HostListener, ....(anything else you have...) } from '@angular/core'

:

@HostListener('scroll') myScrollFunction() {
 ... same code here as above....
}

, , . , CSS navbar , .:-)

EDIT: , , . , - , , isScrolling . , :

<navbar-component [class.navbar-hidden]="isScrollingDown"></navbar-component>
<content-component (scroll)="scrollFunction($event)"></content-component>

...

isScrollingDown: boolean;
lastScrollPosition: number;

scrollFunction($event) : void {
   let newPosition = $event.srcElement.scrollTop;
   if (newPosition <= this.lastScrollPosition){
        isScrollingDown = false;
   }
   else {
        isScrollingDown = true;
   }
   this.lastScrollPosition = newPosition;  // store the last position so you can compare the new and old position with each function call
} 

scrollTop - DOM, .

HostListener, $event.

@HostListener('scroll', ['$event']) myScrollFunction($event){
  ... similar code here...
}