new images, tailwindcss 4

bizmatch-client/src/app/components/header/header.component.ts

@@ -49,6 +49,7 @@ export class HeaderComponent {
   sortByOptions: KeyValueAsSortBy[] = [];
   numberOfBroker$: Observable<number>;
   numberOfCommercial$: Observable<number>;
+  userMenuVisible: boolean = false;
   constructor(
     private router: Router,
     private userService: UserService,
@@ -68,7 +69,19 @@ export class HeaderComponent {
       this.sortDropdownVisible = false;
     }
   }
+  @HostListener('document:click', ['$event'])
+  handleOutsideClick(event: Event) {
+    const target = event.target as HTMLElement;
+    // Schließe das User-Menü, wenn außerhalb geklickt wird
+    if (this.userMenuVisible && !target.closest('#user-menu-button') && !target.closest('#user-menu-dropdown')) {
+      this.userMenuVisible = false;
+    }
+  }
   async ngOnInit() {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+      }
+    });
     const token = await this.authService.getToken();
     this.keycloakUser = map2User(token);
     if (this.keycloakUser) {
@@ -194,6 +207,9 @@ export class HeaderComponent {
   toggleSortDropdown() {
     this.sortDropdownVisible = !this.sortDropdownVisible;
   }
+  toggleUserMenu() {
+    this.userMenuVisible = !this.userMenuVisible;
+  }
   get isProfessional() {
     return this.user?.customerType === 'professional';
   }