Apply Bootstrap 4 Alpha 6

https://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/

Author: akirasosa

package.json

@@ -39,7 +39,7 @@
     "@angularclass/hmr": "^1.2.2",
     "@angularclass/hmr-loader": "^3.0.2",
     "aphrodite": "^1.1.0",
-    "bootstrap": "4.0.0-alpha.5",
+    "bootstrap": "4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "jwt-decode": "^2.1.0",
     "lodash-es": "^4.16.6",

src/app/components/header/header.component.html

@@ -1,12 +1,12 @@
-<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
-  <button class="navbar-toggler hidden-sm-up" type="button"
+<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
+  <button class="navbar-toggler navbar-toggler-right" type="button"
           [mptStyles]="[styles.navbarToggler]" (click)="toggleMenu($event)">
-    &#9776;
+    <span class="navbar-toggler-icon"></span>
   </button>
-  <div class="navbar-toggleable-xs" id="exCollapsingNavbar2"
-       [hidden]="isMenuHidden">
-    <a class="navbar-brand" [routerLink]="['/']">SAMPLE APP</a>
-    <ul class="nav navbar-nav">
+  <a class="navbar-brand" [routerLink]="['/']">SAMPLE APP</a>
+  <div class="navbar-collapse" [hidden]="isMenuHidden">
+
+    <ul class="navbar-nav mr-auto">
       <li class="nav-item" routerLinkActive="active" *ngIf="isSignedIn">
         <a class="nav-link" [routerLink]="['/home']">Home</a>
       </li>
@@ -25,7 +25,8 @@
         <a class="nav-link" [routerLink]="['/login']">Sign in</a>
       </li>
     </ul>
-    <ul class="nav navbar-nav float-sm-right" *ngIf="isSignedIn">
+
+    <ul class="navbar-nav my-2 my-lg-0" *ngIf="isSignedIn">
       <li class="nav-item" routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">
         <a class="nav-link" [routerLink]="['/users/me']">Profile</a>
@@ -39,5 +40,6 @@
            (click)="logout(); $event.preventDefault()">Logout</a>
       </li>
     </ul>
+
   </div>
 </nav>

yarn.lock

@@ -462,12 +462,12 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bootstrap@4.0.0-alpha.5:
-  version "4.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.5.tgz#a126b648c3bd2f52b8fad4bbc5e2d0ad2abf7064"
+bootstrap@4.0.0-alpha.6:
+  version "4.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz#4f54dd33ac0deac3b28407bc2df7ec608869c9c8"
   dependencies:
-    jquery "1.9.1 - 3"
-    tether "^1.3.7"
+    jquery ">=1.9.1"
+    tether "^1.4.0"
 
 bowser@^1.0.0:
   version "1.6.0"
@@ -2231,7 +2231,7 @@ jodid25519@^1.0.0:
   dependencies:
     jsbn "~0.1.0"
 
-"jquery@1.9.1 - 3":
+jquery@>=1.9.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.1.1.tgz#347c1c21c7e004115e0a4da32cece041fad3c8a3"
 
@@ -4241,7 +4241,7 @@ tar@~2.2.1:
     fstream "^1.0.2"
     inherits "2"
 
-tether@^1.3.7:
+tether@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.0.tgz#0f9fa171f75bf58485d8149e94799d7ae74d1c1a"