modify header style

Author: Di Wang

src/app/shared/header/header.component.css

@@ -25,8 +25,15 @@ header{
  margin-left: 5px;
  font-size: 12px;
  line-height: normal;
+ color: #fff;
 }
 
 .right i{
  font-size: 20px;
 }
+
+.router-active{
+ background-color: rgba(255,255,255,.1);
+ padding: 15px 18px 15px 15px;
+ border-radius: 3px;
+}

src/app/shared/header/header.component.html

@@ -3,9 +3,9 @@
  <h5>MD Pro Angular</h5>
  </div>
  <div class="right">
- <a routerLink="/dashboard"><i class="material-icons">dashboard</i><p>DASHBOARD</p></a>
- <a routerLink=""><i class="material-icons">fingerprint</i><p>LOGIN</p></a>
- <a routerLink="/register"><i class="material-icons">person_add</i><p>REGISTER</p></a>
- <a routerLink="/lock" style="margin-right: 0"><i class="material-icons">lock_open</i><p>LOCK</p></a>
+ <a routerLink="/dashboard" routerLinkActive="router-active"><i class="material-icons">dashboard</i><p>DASHBOARD</p></a>
+ <a routerLink="" routerLinkActive="router-active" [routerLinkActiveOptions]="{exact: true}"><i class="material-icons">fingerprint</i><p>LOGIN</p></a>
+ <a routerLink="/register" routerLinkActive="router-active"><i class="material-icons">person_add</i><p>REGISTER</p></a>
+ <a routerLink="/lock" style="margin-right: 0" routerLinkActive="router-active"><i class="material-icons">lock_open</i><p>LOCK</p></a>
  </div>
 </header>