Style navigation items differently when currently active

Author: xkons

projects/train-platform/src/app/navbar/navbar.component.css

@@ -22,6 +22,11 @@ li {
   padding-right: 0.5rem;
 }
 
+.active-nav-item {
+  cursor: default;
+  text-decoration: none;
+}
+
 .page-options {
   display: flex;
   flex-direction: row;

projects/train-platform/src/app/navbar/navbar.component.html

@@ -1,7 +1,7 @@
 <nav>
   <ul>
     <li>
-      <a routerLink="/">{{ "navbar.home" | translate }}</a>
+      <a routerLink="/" routerLinkActive="active-nav-item" [routerLinkActiveOptions]="{exact: true}">{{ "navbar.home" | translate }}</a>
     </li>
   </ul>
   <div class="page-options">