CARD-7-8: Home page nav

src/app/app.component.html

@@ -18,15 +18,45 @@
         <p>Home</p>
       </a>
     </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faPencil"></fa-icon>
+        <p>Author</p>
+      </a>
+    </div>
     <div class="nav-item">
       <a routerLink="/fit-track" routerLinkActive="active">
         <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
         <p>Fit Track</p>
       </a>
     </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faCoins"></fa-icon>
+        <p>Finance</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faCameraRetro"></fa-icon>
+        <p>Retro</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faList"></fa-icon>
+        <p>Todo</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faHammer"></fa-icon>
+        <p>Work Log</p>
+      </a>
+    </div>
   </nav>
-  <div class="user">
-    <img id="avatar" src="/assets/avatar.png">
+  <div class="user" (click)="logout()">
+    <img id="avatar" alt="avatar" src="/assets/avatar.png">
   </div>
 }
 <footer><p>Jrsmth 2024</p></footer>

src/app/app.component.scss

@@ -44,7 +44,7 @@ nav {
 
     a {
       text-decoration: none;
-      color: $white50;
+      color: $text-dark;
 
       &.active {
         color: $mirage;
@@ -75,7 +75,7 @@ nav {
     p {
       font-size: 9px;
       margin-top: .25rem;
-      color: $white50;
+      color: $text-dark;
     }
 
     &:hover {

src/app/app.component.ts

@@ -4,16 +4,9 @@ import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/route
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { HomeComponent } from "./structure/home/home.component";
 import {
-  faCog,
-  faHouse,
-  faPersonRunning,
-  faQuestion,
-  faSearch,
-  faUser,
-  faX,
-  faY,
-  faBell
+  faCog, faHouse, faPersonRunning, faQuestion, faSearch, faBell, faPencil, faCoins, faList, faHammer, faCameraRetro
 } from "@fortawesome/free-solid-svg-icons";
+import {AuthenticationService} from "./core/service/auth/authentication-service";
 
 @Component({
   selector: 'app-root',
@@ -28,13 +21,19 @@ export class AppComponent {
   protected readonly faQuestion = faQuestion;
   protected readonly faBell = faBell;
   protected readonly faSearch = faSearch;
-
-  protected readonly faUser = faUser;
   protected readonly faPersonRunning = faPersonRunning;
   protected readonly faHouse = faHouse;
-  protected readonly faX = faX;
-  protected readonly faY = faY;
+  protected readonly faPencil = faPencil;
+  protected readonly faCoins = faCoins;
+  protected readonly faList = faList;
+  protected readonly faHammer = faHammer;
+  protected readonly faCameraRetro = faCameraRetro;
+
+  constructor(public router: Router, private authService: AuthenticationService) {}
 
-  constructor(public router: Router) {}
+  logout(): void {
+    this.authService.removeToken();
+    this.router.navigate(['/auth']);
+  }
 
 }

src/app/core/guard/auth-guard.ts

@@ -8,7 +8,7 @@ export class AuthGuard {
   constructor (private authService: AuthenticationService, private router: Router) {}
 
   canActivate(): boolean {
-    const userAuthenticated = this.authService.hasValidAuthToken();
+    const userAuthenticated = this.authService.hasValidToken();
 
     if (!userAuthenticated) {
       this.router.navigate(

src/app/core/service/auth/authentication-service.ts

@@ -8,8 +8,12 @@ export class AuthenticationService {
 
   constructor(private localStorage: LocalStorageService) {}
 
-  hasValidAuthToken() {
+  hasValidToken() {
     return !!this.localStorage.get('authToken');
   }
 
+  removeToken(): void {
+    this.localStorage.remove('authToken');
+  }
+
 }

src/app/core/service/storage/local-storage-service.ts

@@ -17,4 +17,8 @@ export class LocalStorageService {
     }
   }
 
+  remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
 }

src/app/structure/home/home.component.html

@@ -5,7 +5,7 @@ <h1>Cardinal</h1>
       <h2>/ˈkɑːdɪnəl/ Of the greatest importance; <br/> fundamental.</h2>
       <div id="content">
         <div class="row">
-          <div class="item">
+          <div class="item" routerLink="/fit-track">
             <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
             <div class="item-description">
               <p class="item-header">Fit Track</p>

src/app/structure/home/home.component.scss

@@ -48,23 +48,25 @@ section {
       margin-top: 4rem;
 
       .item {
-        color: $white;
+        color: $white75;
         display: flex;
         gap: 1rem;
         flex: 1;
-        width: 320px;
+        width: 20rem;
+        cursor: pointer;
 
         .icon {
-          padding: 2rem;
-          border-radius: .25rem;
-          border: 1px solid $white50;
-          background: $white25;
+          padding: 2rem 2.25rem;
+          border-radius: .75rem;
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          background: linear-gradient(45deg, #ffffff00 0%, #ffffff0c 100%);
+          color: $white75;
         }
 
         .item-description {
           .item-header {
             letter-spacing: 2px;
-            margin-bottom: 1rem;
+            margin: .75rem 0 .5rem 0;
           }
 
           .item-body {

src/app/structure/home/home.component.ts

@@ -4,11 +4,12 @@ import {LandingComponent} from "../../core/component/landing/landing.component";
 import { WalletComponent } from "../../core/component/wallet/wallet.component";
 import {faPersonRunning} from "@fortawesome/free-solid-svg-icons";
 import {FaIconComponent} from "@fortawesome/angular-fontawesome";
+import {RouterLink} from "@angular/router";
 
 @Component({
   selector: 'home',
   standalone: true,
-  imports: [CommonModule, LandingComponent, WalletComponent, FaIconComponent],
+  imports: [CommonModule, LandingComponent, WalletComponent, FaIconComponent, RouterLink],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })

src/scss/colour.scss

@@ -34,13 +34,15 @@ $white: #fff;
 $white00: #ffffff00;
 $white25: #ffffff40;
 $white50: #ffffff80;
+$white75: #ffffffbf;
 $silver-chalice: #a9a9a9;
 $alabaster: #f8f8f8;
 $pearl: #b0b0c2;
 $pearl25: #b0b0c240;
 
 // Text
-$text-dark: $walnut;
+$text-darker: $walnut;
+$text-dark: #858585;
 $text-disabled: #888;
 $text-lightest: whitesmoke;
 $text-lighter: #eee;