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. (TrilonIO#397)

Author: BillSheldon-HunterIndustries

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>

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"
+    }
 }