From 3b08e58642d82bb8ca7159b6a90cc77f1f227d79 Mon Sep 17 00:00:00 2001
From: BillSheldon-HunterIndustries <Bill.Sheldon@hunterindustries.com>
Date: Sat, 2 Sep 2017 14:39:24 -0700
Subject: [PATCH] Minor updates related to the menu when in a mobile size
 display.  When a menu item is selected this update causes the menu to
 automatically collapse.

---
 .../components/navmenu/navmenu.component.html  | 18 +++++++++---------
 .../components/navmenu/navmenu.component.ts    |  6 +++++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ClientApp/app/components/navmenu/navmenu.component.html b/ClientApp/app/components/navmenu/navmenu.component.html
index a4cffbdc..57b9c351 100644
--- a/ClientApp/app/components/navmenu/navmenu.component.html
+++ b/ClientApp/app/components/navmenu/navmenu.component.html
@@ -14,35 +14,35 @@
     <div class='clearfix'></div>
     <div class='navbar-collapse {{collapse}}'>
       <ul class='nav navbar-nav'>
-        <li [routerLinkActive]="['link-active']">
+        <li [routerLinkActive]="['link-active']" (click)="collapseMenu()">
           <a [routerLink]="['/home']">
             <span class='glyphicon glyphicon-home'></span> {{ 'HOME' | translate }}
           </a>
         </li>
-        <li [routerLinkActive]="['link-active']">
+        <li [routerLinkActive]="['link-active']" (click)="collapseMenu()">
           <a [routerLink]="['/counter']">
             <span class='glyphicon glyphicon-education'></span> {{ 'COUNTER' | translate }}
           </a>
         </li>
-        <li [routerLinkActive]="['link-active']">
+        <li [routerLinkActive]="['link-active']" (click)="collapseMenu()">
           <a [routerLink]="['/users']">
             <span class='glyphicon glyphicon-user'></span> Rest API Demo
           </a>
         </li>
-        <li [routerLinkActive]="['link-active']">
+        <li [routerLinkActive]="['link-active']" (click)="collapseMenu()">
           <a [routerLink]="['/ngx-bootstrap']">
             <span class='glyphicon glyphicon-th-large'></span> ngx-Bootstrap demo
           </a>
         </li>
-        <li [routerLinkActive]="['link-active']">
+        <li [routerLinkActive]="['link-active']" (click)="collapseMenu()">
           <a [routerLink]="['/lazy']">
             <span class='glyphicon glyphicon-star-empty'></span> Lazy-loaded demo
           </a>
         </li>
-        <li [routerLinkActive]="['link-active']">
-            <a [routerLink]="['/chat']">
-                <span class='glyphicon glyphicon-comment'></span> Chat
-            </a>
+        <li [routerLinkActive]="['link-active']" (click)="collapseMenu()">
+          <a [routerLink]="['/chat']">
+            <span class='glyphicon glyphicon-comment'></span> Chat
+          </a>
         </li>
       </ul>
     </div>
diff --git a/ClientApp/app/components/navmenu/navmenu.component.ts b/ClientApp/app/components/navmenu/navmenu.component.ts
index 3287431d..ac36f036 100644
--- a/ClientApp/app/components/navmenu/navmenu.component.ts
+++ b/ClientApp/app/components/navmenu/navmenu.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'nav-menu',
@@ -16,4 +16,8 @@ export class NavMenuComponent {
             this.collapse = "collapse";
         }
     }
+
+    collapseMenu() {
+        this.collapse = "collapse"
+    }
 }