Change Angular 2 template to use app-style layout, like the React template

templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css

@@ -0,0 +1,60 @@
+.main-nav li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+.main-nav li a.router-link-active,
+.main-nav li a.router-link-active:hover,
+.main-nav li a.router-link-active: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);
+    }
+    .main-nav .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .main-nav .navbar-header {
+        float: none;
+    }
+    .main-nav .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .main-nav .navbar ul {
+        float: none;
+    }
+    .main-nav .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .main-nav .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .main-nav .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html

@@ -0,0 +1,33 @@
+<div class='main-nav'> 
+        <div class='navbar navbar-inverse'>
+        <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']">WebApplicationBasic</a>
+        </div>
+        <div class='clearfix'></div>
+        <div class='navbar-collapse collapse'>
+            <ul class='nav navbar-nav'>
+                <li>
+                    <a [routerLink]="['/Home']">
+                        <span class='glyphicon glyphicon-home'></span> Home
+                    </a>
+                </li>
+                <li>
+                    <a [routerLink]="['/Counter']">
+                        <span class='glyphicon glyphicon-education'></span> Counter
+                    </a>
+                </li>
+                <li>
+                    <a [routerLink]="['/About']">
+                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts

@@ -0,0 +1,13 @@
+import * as ng from 'angular2/core';
+import * as router from 'angular2/router';
+
+@ng.Component({
+  selector: 'nav-menu'
+})
+@ng.View({
+  template: require('./nav-menu.html'),
+  directives: [router.ROUTER_DIRECTIVES],
+  styles: [require('./nav-menu.css')]
+})
+export class NavMenu {
+}