init app routing

philipphoeninger · Oct 11, 2024 · 716a5e0 · 716a5e0
1 parent 0eb002d
commit 716a5e0
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 25 deletions.
diff --git a/CLIENT/CLIENT.FileSharing/src/app/app.routes.ts b/CLIENT/CLIENT.FileSharing/src/app/app.routes.ts
@@ -1,3 +1,39 @@
 import { Routes } from '@angular/router';
+import { HomeComponent } from './pages/home/home.component';
+import { MyLinksComponent } from './pages/my-links/my-links.component';
+import { SharedComponent } from './pages/shared-component/shared.component';
+import { UploadsComponent } from './pages/uploads/uploads.component';
+import { ProfileComponent } from './pages/profile/profile.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'home',
+  },
+  {
+    path: 'home',
+    component: HomeComponent,
+  },
+  {
+    path: 'uploads',
+    component: UploadsComponent,
+  },
+  {
+    path: 'myLinks',
+    component: MyLinksComponent,
+  },
+  {
+    path: 'sharedWithMe',
+    component: SharedComponent,
+  },
+  {
+    path: 'profile',
+    component: ProfileComponent,
+  },
+  {
+    path: 'settings',
+    component: SettingsComponent,
+  },
+];
diff --git a/CLIENT/CLIENT.FileSharing/src/app/navigation/navbar/navbar.component.html b/CLIENT/CLIENT.FileSharing/src/app/navigation/navbar/navbar.component.html
@@ -8,31 +8,23 @@
     [fixedTopGap]="64"
   >
     <!-- [fixedBottomGap]="64" -->
-    <mat-nav-list role="list">
-      <a mat-list-item>
-        <mat-icon matListItemIcon>home</mat-icon>
-        <span matListIconTitle>Some text</span>
-      </a>
-      <a mat-list-item>
-        <mat-icon matListItemIcon>cloud_upload</mat-icon>
-        <span matListIconTitle>Uploads</span>
-      </a>
-      <a mat-list-item>
-        <mat-icon matListItemIcon>link</mat-icon>
-        <span matListIconTitle>My Links</span>
-      </a>
-      <a mat-list-item>
-        <mat-icon matListItemIcon>share</mat-icon>
-        <span matListIconTitle>Shared with me</span>
-      </a>
-      <a mat-list-item>
-        <mat-icon matListItemIcon>logout</mat-icon>
-        <span matListIconTitle>Logout</span>
-      </a>
+    <mat-nav-list role="list" style="padding-top: 0">
+      @for (menuItem of menuItems(); track menuItem) {
+        <a
+          mat-list-item
+          [routerLink]="menuItem.route"
+          routerLinkActive
+          #rla="routerLinkActive"
+          [activated]="rla.isActive"
+        >
+          <mat-icon matListItemIcon>{{ menuItem.icon }}</mat-icon>
+          <span matListIconTitle>{{ menuItem.label }}</span>
+        </a>
+      }
     </mat-nav-list>
   </mat-sidenav>
 
-  <mat-sidenav-content>
+  <mat-sidenav-content style="padding: 8px">
     <router-outlet />
   </mat-sidenav-content>
 </mat-sidenav-container>

diff --git a/CLIENT/CLIENT.FileSharing/src/app/navigation/navbar/navbar.component.ts b/CLIENT/CLIENT.FileSharing/src/app/navigation/navbar/navbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, signal } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,7 +8,13 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
-import { RouterOutlet } from '@angular/router';
+import { RouterModule, RouterOutlet } from '@angular/router';
+
+export type MenuItem = {
+  icon: string;
+  label: string;
+  route?: string;
+};
 
 @Component({
   selector: 'fs-navbar',
@@ -26,10 +32,37 @@ import { RouterOutlet } from '@angular/router';
     MatListModule,
     MatIconModule,
     RouterOutlet,
+    RouterModule,
   ],
   standalone: true,
 })
 export class NavbarComponent implements OnInit {
+  menuItems = signal<MenuItem[]>([
+    {
+      icon: 'home',
+      label: 'Home',
+      route: 'home',
+    },
+    {
+      icon: 'cloud_upload',
+      label: 'Uploads',
+      route: 'uploads',
+    },
+    {
+      icon: 'link',
+      label: 'My Links',
+      route: 'myLinks',
+    },
+    {
+      icon: 'share',
+      label: 'Shared with me',
+      route: 'sharedWithMe',
+    },
+    {
+      icon: 'logout',
+      label: 'Logout',
+    },
+  ]);
   constructor() {}
 
   ngOnInit() {}