Pull Request: 1.Changes to the top level scss file to support multiple display widths. 2.Changes to the navmenu component to make the 'hamburger' menu visible on mobile displays. (TrilonIO#372)

Author: OceansideBill

Client/app/app.component.scss

@@ -14,13 +14,50 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
    Note: This Component has ViewEncapsulation.None so the styles will bleed out
 
 */
+@media (max-width: 767px) {
+  body {
+    background: #f1f1f1;
+    line-height: 18px;
+    padding-top: 30px;
+  }
+
+  h1 {
+    border-bottom: 3px #4189C7 solid;
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h1, h2, h3 {
+    padding: 3px 0;
+  }
+}
+
+@media (min-width: 768px) {
+  body {
+    background: #f1f1f1;
+    line-height: 18px;
+    padding-top: 0px;
+  }
+
+  h1 {
+    border-bottom: 5px #4189C7 solid;
+    font-size: 36px;
+  }
+
+  h2 {
+    font-size: 30px;
+  }
+
+  h1, h2, h3 {
+    padding: 10px 0;
+  }
+}
 
-body { background: #f1f1f1; line-height: 18px; }
 ul { padding: 10px 25px; }
 ul li { padding: 5px 0; }
 
-h1 { border-bottom: 5px #4189C7 solid; }
-h1, h2, h3 { padding: 10px 0; }
-
 blockquote { margin: 25px 10px; padding: 10px 35px 10px 10px; border-left: 10px #158a15 solid; background: #edffed; }
 blockquote a, blockquote a:hover { color: #068006; }

Client/app/components/navmenu/navmenu.component.css

@@ -1,4 +1,4 @@
-li .glyphicon {
+li .glyphicon {
     margin-right: 10px;
 }
 
@@ -19,17 +19,65 @@ li.link-active a:focus {
     z-index: 1;
 }
 
+.icon-bar {
+  background-color: #4189C7;
+}
+
+
+@media (max-width: 767px) {
+  /* Apply for small displays */
+  .main-nav {
+    width: 100%;
+  }
+
+  .navbar-brand {
+    font-size: 14px;
+    background-color: #f1f1f1;
+  }
+  .navbar-toggle {
+    padding: 0px 5px;
+    margin-top: 0px;
+    height: 26px;
+  }
+
+  .navbar-link {
+    margin-top: 4px;
+    margin-left: 45px;
+    position: fixed;
+  }
+
+  .navbar-collapse {
+    background-color: white;
+  }
+
+  .navbar a {
+    /* If a menu item's text is too long, truncate it */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 5px;
+  }
+}
+
 @media (min-width: 768px) {
     /* On small screens, convert the nav menu to a vertical sidebar */
     .main-nav {
         height: 100%;
+        max-width: 330px;
         width: calc(25% - 20px);
     }
     .navbar {
         border-radius: 0px;
         border-width: 0px;
         height: 100%;
     }
+    .navbar-brand{
+      width: 100%;
+    }
+  .navbar-link {
+    display: block;
+    width: 100%
+  }
     .navbar-header {
         float: none;
     }
@@ -51,7 +99,6 @@ li.link-active a:focus {
     }
     .navbar a {
         /* If a menu item's text is too long, truncate it */
-        width: 100%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

Client/app/components/navmenu/navmenu.component.html

@@ -1,16 +1,18 @@
-<div class='main-nav'>
+<div class='main-nav'>
   <div class='navbar'>
     <div class='navbar-header'>
-      <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
-                <span class='sr-only'>Toggle navigation</span>
-                <span class='icon-bar'></span>
-                <span class='icon-bar'></span>
-                <span class='icon-bar'></span>
-            </button>
-      <a class='navbar-brand' [routerLink]="['/home']">Angular 4 Universal & ASP.NET Core </a>
+      <div class='navbar-brand'>
+        <button type='button' class='navbar-toggle' (click)="collapseNavbar()">
+          <span class='sr-only'>Toggle navigation</span>
+          <span class='icon-bar'></span>
+          <span class='icon-bar'></span>
+          <span class='icon-bar'></span>
+        </button>
+        <a [routerLink]="['/home']" class='navbar-link'>Angular 4 Universal & ASP.NET Core</a>
+      </div>
     </div>
     <div class='clearfix'></div>
-    <div class='navbar-collapse collapse'>
+    <div class='navbar-collapse {{collapse}}'>
       <ul class='nav navbar-nav'>
         <li [routerLinkActive]="['link-active']">
           <a [routerLink]="['/home']">

Client/app/components/navmenu/navmenu.component.ts

@@ -1,9 +1,19 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'nav-menu',
     templateUrl: './navmenu.component.html',
     styleUrls: ['./navmenu.component.css']
 })
+
 export class NavMenuComponent {
+    collapse: string = "collapse";
+
+    collapseNavbar(): void {
+        if (this.collapse.length > 1) {
+            this.collapse = "";
+        } else {
+            this.collapse = "collapse";
+        }
+    }
 }