src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -1,3 +1,5 @@
+<div class="d-flex flex-row">
+  <app-navigation-bar [route]="'employee'" class="row" style="height: 100vh;"></app-navigation-bar>
   <div class="container">
     <div class="header">
       <div class="dropdown position-absolute top-0 end-0 m-3">
@@ -47,3 +49,4 @@
       </tbody>
     </table>
   </div>
+</div>

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts

@@ -5,13 +5,14 @@ import { EmployeeResponseDTO } from '../../models/mitarbeiter';
 import { EmployeeService } from '../../service/employee.service';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
   templateUrl: './mitarbeiterverwaltung-view.component.html',
   styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule]
+  imports: [CommonModule, ReactiveFormsModule, NavigationBarComponent]
 })
 export class MitarbeiterverwaltungViewComponent implements OnInit {
   employees: Array<EmployeeResponseDTO> = [];

src/app/components/navigation-bar/navigation-bar.component.html

@@ -5,18 +5,13 @@
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link active text-black" aria-current="page">
-          Dashboard
-        </a>
-      </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a [routerLink]="['/mitarbeiter']" (click)="employees()" [class.active]="route == 'employee'" class="nav-link text-black" aria-current="page">
           Mitarbeiterverwaltung
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a [routerLink]="['/qualifikationsverwaltung']" [class.active]="route == 'skill'" class="nav-link text-black">
           Qualifikationsverwaltung
         </a>
       </li>

src/app/components/navigation-bar/navigation-bar.component.ts

@@ -1,12 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-navigation-bar',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './navigation-bar.component.html',
   styleUrl: './navigation-bar.component.css'
 })
 export class NavigationBarComponent {
+  constructor(private router: Router) { }
+  @Input() route: string = "";
 
+  employees() {
+    this.router.navigate(['mitarbeiter']);
+  }
 }

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html

@@ -1,3 +1,5 @@
+<div class="d-flex flex-row">
+  <app-navigation-bar [route]="'skill'" class="row" style="height: 100vh;"></app-navigation-bar>
   <div class="container">
     <div class="header">
       <div class="dropdown position-absolute top-0 end-0 m-3">
@@ -55,3 +57,4 @@
       </tbody>
     </table>
   </div>
+</div>

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts

@@ -3,11 +3,12 @@ import { QualificationGetDTO } from '../../models/skill';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { SkillService } from '../../service/skill.service';
 import { Router } from '@angular/router';
+import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
 
 @Component({
   selector: 'app-qualifikationsverwaltung',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, NavigationBarComponent],
   templateUrl: './qualifikationsverwaltung.component.html',
   styleUrl: './qualifikationsverwaltung.component.css'
 })