Implements More Automatic Routing Configuration

src/app/header/header-slider/nav-slider/nav-slider.component.html

@@ -2,7 +2,7 @@
     <div class="nav-links">
         <ul>
             <li
-                *ngFor="let nav of navLink; let i = index"
+                *ngFor="let page of pages; let i = index"
                 [@animateSliderItem]="{
                     value: itemStatus,
                     params: {
@@ -11,8 +11,8 @@
                     }
                 }"
             >
-                <a [routerLink]="nav.link">
+                <a [routerLink]="page.route">
-                    {{ nav.page }}
+                    {{ page.name }}
                 </a>
             </li>
         </ul>
@@ -25,8 +25,8 @@
         [@animateSliderItem]="{
             value: itemStatus,
             params: {
-                fadeInTime: 0.6 + (navLink.length + 1) / 20,
+                fadeInTime: 0.6 + (pages.length + 1) / 20,
-                fadeOutTime: 0.6 - (navLink.length + 1) / 10
+                fadeOutTime: 0.6 - (pages.length + 1) / 10
             }
         }"
         #profile

src/app/header/header-slider/nav-slider/nav-slider.component.ts

@@ -1,6 +1,7 @@
 import {
     Component,
     EventEmitter,
+    Input,
     OnDestroy,
     OnInit,
     Output,
@@ -23,12 +24,8 @@ export class NavSliderComponent
 {
     userIcon = faUser;
 
-    navLink = [
+    @Input()
-        { page: 'Home', link: '/home' },
+    pages!: { name: string; route: string }[];
-        { page: 'Work', link: '/home' },
-        { page: 'Contact', link: '/home' },
-        { page: 'About', link: '/home' },
-    ];
 
     loggedUser!: User | null;
 

src/app/header/header.component.html

@@ -7,10 +7,9 @@
         </div>
         <div class="nav-links">
             <ul class="link-container">
-                <li><a routerLink="/home">Home</a></li>
+                <li *ngFor="let page of pages">
-                <li><a routerLink="/home">Work</a></li>
+                    <a [routerLink]="page.route">{{ page.name }}</a>
-                <li><a routerLink="/home">Contact</a></li>
+                </li>
-                <li><a routerLink="/home">About</a></li>
             </ul>
         </div>
 
@@ -64,6 +63,7 @@
             <app-nav-slider
                 [state]="navSliderStatus"
                 (profileButtonClicked)="profileButtonClicked()"
+                [pages]="pages"
             >
             </app-nav-slider>
         </app-header-slider>

src/app/header/header.component.ts

@@ -23,6 +23,12 @@ import { MyProfileComponent } from './header-popup/my-profile/my-profile.compone
     styleUrls: ['./header.component.css'],
 })
 export class HeaderComponent implements OnInit, OnDestroy {
+    pages: { name: string; route: string }[] = [
+        { name: 'Home', route: '/home' },
+        { name: 'Projects', route: '/home' },
+        { name: 'Contact', route: '/home' },
+    ];
+
     userIcon = faUser;
 
     profileDropdownState: boolean = false;
@@ -30,6 +36,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     signupPopupState: boolean = false;
 
     navSliderStatus: boolean = false;
+
     userSliderStatus: boolean = false;
 
     @ViewChild('profileBtn')