git init v2

src/app/pages/home/home.component.html

@@ -0,0 +1,41 @@
+<!-- Ignore this part, it is only here to position drawer inside the example block -->
+<div class="custom-portal">
+  <ng-container #viewContainer/>
+</div>
+<header>
+  <div class="navbar">
+    <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid">
+    <ul>
+      <li><a routerLink="/home/agenda" routerLinkActive="active">Agenda</a></li>
+      <li><a routerLink="/home/klanten" routerLinkActive="active">Klanten</a></li>
+    </ul>
+    <hr/>
+    <button
+      tuiChevron
+      type="button"
+      [tuiDropdown]="dropdownContent"
+      [tuiDropdownManual]="open"
+      [tuiObscuredEnabled]="open"
+      (click)="onClick()"
+      (tuiActiveZoneChange)="onActiveZone($event)"
+      (tuiObscured)="onObscured($event)"
+    >
+      <tui-avatar src="{{getInitials()}}"/>
+      <ng-template #dropdownContent>
+        <div class="dropdown">
+          <h3>{{fullName}}</h3>
+          <button
+            size="m"
+            tuiButton
+            type="button"
+            (click)="logout()"
+          >
+            Uitloggen
+          </button>
+        </div>
+      </ng-template>
+    </button>
+  </div>
+</header>
+
+<router-outlet></router-outlet>

src/app/pages/home/home.component.scss

@@ -0,0 +1,62 @@
+.navbar {
+  background-color: #f8f9fa;
+  display: flex
+}
+
+ul {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  list-style-type: none;
+  align-items: center;
+}
+
+li {
+  margin: 0 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+  font-size: 16px;
+}
+
+img {
+  display: block;
+  max-width: 230px;
+  max-height: 95px;
+  width: auto;
+  height: auto;
+}
+
+hr {
+  clear: both;
+  visibility: hidden;
+}
+
+tui-avatar {
+  margin-right: 32px;
+  cursor: pointer;
+}
+
+.active {
+  font-weight: bold;
+}
+
+.dropdown {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  padding: 0.25rem 0.75rem;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-bottom: 8px;
+}
+
+.t-content{
+  margin-right: 24px;
+}
+
+button{
+  background: transparent;
+  border: none;
+}

src/app/pages/home/home.component.ts

@@ -0,0 +1,55 @@
+import {Component, OnInit} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {Router, RouterLink, RouterLinkActive, RouterModule} from '@angular/router';
+import {TuiAvatar, TuiChevron,} from '@taiga-ui/kit';
+import {AuthService} from '../../services/auth.service';
+import {User} from '../../models/user';
+import {TuiButton, TuiDropdown} from '@taiga-ui/core';
+import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
+
+@Component({
+  selector: 'app-home',
+  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent implements OnInit {
+  user: User
+  fullName: string
+
+  getInitials(): string {
+    this.user = this.authService.getUserInfo();
+    this.fullName = this.user.firstName + ' ' + this.user.lastName;
+    return this.fullName.split(' ').map((n) => n[0]).join('').substring(0, 2);
+  }
+
+  protected open = false;
+
+  protected onClick(): void {
+    this.open = !this.open;
+  }
+
+  protected onObscured(obscured: boolean): void {
+    if (obscured) {
+      this.open = false;
+    }
+  }
+
+  protected onActiveZone(active: boolean): void {
+    this.open = active && this.open;
+  }
+
+  constructor(private authService: AuthService, private router: Router) {
+  }
+
+  ngOnInit(): void {
+    if (!this.authService.isAuthenticated()) {
+      this.router.navigate(['login']);
+    }
+  }
+
+  logout() {
+    this.authService.logout();
+    this.router.navigate(['login']);
+  }
+}