Fehler Hamburger Menu, Backend requests

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

@@ -1,7 +1,7 @@
 <nav class="bg-white border-neutral-200 dark:bg-neutral-900 print:hidden">
   <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
     <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
-      <img src="assets/images/header-logo.png" class="h-10" alt="BizMatch - Business Marketplace for Buying and Selling Businesses" width="150" height="40" />
+      <img src="assets/images/header-logo.png" class="h-10 w-auto" alt="BizMatch - Business Marketplace for Buying and Selling Businesses" />
     </a>
     <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
       <!-- Filter button -->

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

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { Collapse, Dropdown } from 'flowbite';
+import { Collapse, Dropdown, initFlowbite } from 'flowbite';
 import { filter, Observable, Subject, takeUntil } from 'rxjs';
 
 import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
@@ -29,7 +29,7 @@ import { ModalService } from '../search-modal/modal.service';
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent implements OnInit, OnDestroy {
+export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   public buildVersion = environment.buildVersion;
   user$: Observable<KeycloakUser>;
   keycloakUser: KeycloakUser;
@@ -285,6 +285,14 @@ export class HeaderComponent implements OnInit, OnDestroy {
     };
   }
 
+  ngAfterViewInit(): void {
+    // Initialize Flowbite after header DOM is fully rendered
+    // This ensures all dropdown elements exist before initialization
+    setTimeout(() => {
+      initFlowbite();
+    }, 0);
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();

bizmatch/src/app/components/validated-price/validated-price.component.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input } from '@angular/core';
+import { Component, forwardRef, Input, OnInit, OnDestroy } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgxCurrencyDirective } from 'ngx-currency';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { BaseInputComponent } from '../base-input/base-input.component';
 import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
@@ -20,15 +22,39 @@ import { ValidationMessagesService } from '../validation-messages.service';
   templateUrl: './validated-price.component.html',
   styles: `:host{width:100%}`,
 })
-export class ValidatedPriceComponent extends BaseInputComponent {
+export class ValidatedPriceComponent extends BaseInputComponent implements OnInit, OnDestroy {
   @Input() inputClasses: string;
   @Input() placeholder: string = '';
+  @Input() debounceTimeMs: number = 400; // Configurable debounce time in milliseconds
+
+  private inputChange$ = new Subject<any>();
+  private destroy$ = new Subject<void>();
+
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }
 
+  override ngOnInit(): void {
+    // Setup debounced onChange
+    this.inputChange$
+      .pipe(
+        debounceTime(this.debounceTimeMs),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(value => {
+        this.value = value;
+        this.onChange(this.value);
+      });
+  }
+
+  override ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   onInputChange(event: Event): void {
-    this.value = !event ? null : event;
-    this.onChange(this.value);
+    const newValue = !event ? null : event;
+    // Send signal to Subject instead of calling onChange directly
+    this.inputChange$.next(newValue);
   }
 }