From c4b509c1ebb2cf8b8d5844d8a53165130dfaa53a Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Fri, 12 Jun 2026 15:45:34 -0500
Subject: [PATCH] menu fix

---
 .../components/header/header.component.html   | 10 +++----
 .../app/components/header/header.component.ts | 26 ++++++-------------
 2 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/bizmatch/src/app/components/header/header.component.html b/bizmatch/src/app/components/header/header.component.html
index d7b446b..df7af81 100644
--- a/bizmatch/src/app/components/header/header.component.html
+++ b/bizmatch/src/app/components/header/header.component.html
@@ -31,7 +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'">
+        id="user-menu-button" aria-expanded="false" (click)="toggleUserMenu()">
         <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 }}"
@@ -43,8 +43,8 @@
       <!-- Dropdown menu -->
       @if(user){
       <div
-        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
-        id="user-login">
+        class="z-50 my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
+        id="user-login" [class.hidden]="!userMenuVisible">
         <div class="px-4 py-3">
           <span class="block text-sm text-neutral-900 dark:text-white">Welcome, {{ user.firstname }} </span>
           <span class="block text-sm text-neutral-500 truncate dark:text-neutral-400">{{ user.email }}</span>
@@ -122,8 +122,8 @@
       </div>
       } @else {
       <div
-        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
-        id="user-unknown">
+        class="z-50 my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
+        id="user-unknown" [class.hidden]="!userMenuVisible">
         <ul class="py-2" aria-labelledby="user-menu-button">
           <li>
             <a routerLink="/login" [queryParams]="{ mode: 'login' }"
diff --git a/bizmatch/src/app/components/header/header.component.ts b/bizmatch/src/app/components/header/header.component.ts
index c42eaa7..49f3e94 100644
--- a/bizmatch/src/app/components/header/header.component.ts
+++ b/bizmatch/src/app/components/header/header.component.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { APP_ICONS } from '../../utils/fontawesome-icons';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { Collapse, Dropdown, initFlowbite } from 'flowbite';
+import { Collapse } from 'flowbite';
 import { filter, Observable, Subject, takeUntil } from 'rxjs';
 
 import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
@@ -38,8 +38,8 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   faUserGear = APP_ICONS.faUserGear;
   profileUrl: string;
   env = environment;
-  private filterDropdown: Dropdown | null = null;
   isMobile: boolean = false;
+  userMenuVisible = false;
   private destroy$ = new Subject<void>();
   prompt: string;
   private platformId = inject(PLATFORM_ID);
@@ -109,15 +109,9 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
       this.profileUrl = photoUrl;
     });
 
-    // User Updates - re-initialize Flowbite when user state changes
-    // This ensures the dropdown bindings are updated when the dropdown target changes
+    // User Updates
     this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
-      const previousUser = this.user;
       this.user = u;
-      // Re-initialize Flowbite if user logged in/out state changed
-      if ((previousUser === null) !== (u === null) && this.isBrowser) {
-        setTimeout(() => initFlowbite(), 50);
-      }
     });
 
     // Router Events
@@ -235,15 +229,7 @@ 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');
-
-    if (dropdownButton && dropdownMenu) {
-      const dropdown = new Dropdown(dropdownMenu, dropdownButton);
-      dropdown.hide();
-    }
+    this.userMenuVisible = false;
   }
 
   closeMobileMenu() {
@@ -286,6 +272,10 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
     this.sortDropdownVisible = !this.sortDropdownVisible;
   }
 
+  toggleUserMenu() {
+    this.userMenuVisible = !this.userMenuVisible;
+  }
+
   get isProfessional() {
     return this.user?.customerType === 'professional';
   }