npm run serve:ssr funktioniert und Hamburger Menu bug fix

bizmatch/src/app/components/header/header.component.html

@@ -31,8 +31,7 @@
       }
       <button type="button"
         class="flex text-sm bg-neutral-400 rounded-full md:me-0 focus:ring-4 focus:ring-neutral-300 dark:focus:ring-neutral-600"
-        id="user-menu-button" aria-expanded="false" [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
-        data-dropdown-placement="bottom">
+        id="user-menu-button" aria-expanded="false" [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'">
         <span class="sr-only">Open user menu</span>
         @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
         <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}"

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

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, HostListener, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, HostListener, OnDestroy, OnInit, AfterViewInit, PLATFORM_ID, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
@@ -42,6 +42,8 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   isMobile: boolean = false;
   private destroy$ = new Subject<void>();
   prompt: string;
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
 
   // Aktueller Listing-Typ basierend auf Route
   currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
@@ -74,6 +76,16 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
     const excludedIds = ['sortDropdownButton', 'sortDropdownMobileButton', 'user-menu-button'];
     if (!excludedIds.includes(target.id) && !target.closest('#user-menu-button')) {
       this.sortDropdownVisible = false;
+
+      // Close User Menu if clicked outside
+      // We check if the click was inside the menu containers
+      const userLogin = document.getElementById('user-login');
+      const userUnknown = document.getElementById('user-unknown');
+      const clickedInsideMenu = (userLogin && userLogin.contains(target)) || (userUnknown && userUnknown.contains(target));
+
+      if (!clickedInsideMenu) {
+        this.closeDropdown();
+      }
     }
   }
 
@@ -103,7 +115,7 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
       const previousUser = this.user;
       this.user = u;
       // Re-initialize Flowbite if user logged in/out state changed
-      if ((previousUser === null) !== (u === null)) {
+      if ((previousUser === null) !== (u === null) && this.isBrowser) {
         setTimeout(() => initFlowbite(), 50);
       }
     });
@@ -223,6 +235,8 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   closeDropdown() {
+    if (!this.isBrowser) return;
+
     const dropdownButton = document.getElementById('user-menu-button');
     const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');
 
@@ -233,6 +247,8 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   closeMobileMenu() {
+    if (!this.isBrowser) return;
+
     const targetElement = document.getElementById('navbar-user');
     const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');
 
@@ -293,12 +309,10 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
     };
   }
 
+
+
   ngAfterViewInit(): void {
-    // Initialize Flowbite after header DOM is fully rendered
-    // This ensures all dropdown elements exist before initialization
-    setTimeout(() => {
-      initFlowbite();
-    }, 0);
+    // Flowbite initialization is now handled manually or via AppComponent
   }
 
   ngOnDestroy() {