aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

menu fix

Browse Source
This commit is contained in:
Andreas Knuth
2026-06-12 15:45:34 -05:00
parent 577b63b7e7
commit c4b509c1eb
2 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
bizmatch/src/app/components/header/header.component.html
View File

@@ -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' }"

26
bizmatch/src/app/components/header/header.component.ts
View File

@@ -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';
}