@flusys/ng-layout 4.0.0-rc → 4.0.2

package/fesm2022/flusys-ng-layout.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
-import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, TranslatePipe, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, afterNextRender, InjectionToken, input, DestroyRef, viewChild, ElementRef, Renderer2 } from '@angular/core';
+import * as i2$3 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, TranslatePipe, IconComponent, AngularModule, PrimeModule } from '@flusys/ng-shared';
 import { isPlatformBrowser, NgComponentOutlet, DOCUMENT as DOCUMENT$1, NgClass } from '@angular/common';
-import { APP_CONFIG, TRANSLATE_ADAPTER, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import { APP_CONFIG, TRANSLATE_ADAPTER, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled, isSignUpEnabled } from '@flusys/ng-core';
 import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
-import { Router, RouterModule, NavigationEnd } from '@angular/router';
+import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeuix/themes';
 import Aura from '@primeuix/themes/aura';
 import Lara from '@primeuix/themes/lara';
@@ -21,11 +21,14 @@ import * as i2$1 from 'primeng/styleclass';
 import { StyleClassModule } from 'primeng/styleclass';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter } from 'rxjs/operators';
+import * as i2$2 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
 import { MessageService } from 'primeng/api';
 import * as i4 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i2$3 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
+import * as i3 from 'primeng/iconfield';
+import * as i4$1 from 'primeng/inputicon';
+import * as i5 from 'primeng/inputtext';
 import Material from '@primeuix/themes/material';
 
 /** Filter launcher apps based on user permission codes */
@@ -111,7 +114,7 @@ class LayoutPersistenceService {
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     validPresets = ['Aura', 'Lara', 'Nora'];
-    validMenuModes = ['static', 'overlay'];
+    validMenuModes = ['static', 'overlay', 'topbar'];
     /**
      * Load configuration from localStorage.
      * Returns null if no saved config or invalid data.
@@ -223,6 +226,7 @@ class LayoutService {
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false,
+        topbarMenuVisible: true,
     };
     _layoutConfig = signal({
         ...this.DEFAULT_CONFIG,
@@ -242,6 +246,7 @@ class LayoutService {
     companyProfile = this._companyProfile.asReadonly();
     // Static app info from config
     appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
+    appLogo = this.appConfig?.appLogo ?? '';
     authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
     authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
     // Permission-filtered menu and apps
@@ -255,6 +260,7 @@ class LayoutService {
     getPrimary = computed(() => this._layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
     getSurface = computed(() => this._layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
     isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+    isTopbar = computed(() => this._layoutConfig().menuMode === 'topbar', ...(ngDevMode ? [{ debugName: "isTopbar" }] : []));
     // User profile computed signals
     userName = computed(() => this._userProfile()?.name ?? this.translateAdapter?.translate('layout.profile.guest') ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
@@ -266,6 +272,7 @@ class LayoutService {
             return this.appName;
         return this._companyProfile()?.name ?? this.appName;
     }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
+    displayLogo = computed(() => this.companyLogoUrl() ?? this.appLogo, ...(ngDevMode ? [{ debugName: "displayLogo" }] : []));
     // RxJS Subjects for event communication
     configUpdate = new Subject();
     overlayOpen = new Subject();
@@ -310,6 +317,14 @@ class LayoutService {
     }
     onMenuToggle() {
         const state = this._layoutState();
+        // Desktop topbar mode: toggle topbar nav visibility
+        if (this.isDesktop() && this.isTopbar()) {
+            this._layoutState.update((prev) => ({
+                ...prev,
+                topbarMenuVisible: !prev.topbarMenuVisible,
+            }));
+            return;
+        }
         // Mobile always uses staticMenuMobileActive regardless of menu mode
         if (!this.isDesktop()) {
             const newMobileActive = !state.staticMenuMobileActive;
@@ -382,13 +397,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class AppFooter {
     layoutService = inject(LayoutService);
     appName = this.layoutService.appName;
+    displayLogo = this.layoutService.appLogo;
     authorName = this.layoutService.authorName;
     authorUrl = this.layoutService.authorUrl;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
-        {{ appName }} {{ 'layout.footer.by' | translate }}
-        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
-    </div>`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+    @if (displayLogo) {
+      <img [src]="displayLogo" [alt]="appName" class="logo-image" />
+    }
+    {{ appName }} {{ 'layout.footer.by' | translate }}
+    <a
+      [href]="authorUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-primary font-bold hover:underline"
+      >{{ authorName }}</a
+    >
+  </div>`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, decorators: [{
             type: Component,
@@ -396,9 +421,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     selector: 'app-footer',
                     imports: [TranslatePipe],
                     template: `<div class="layout-footer">
-        {{ appName }} {{ 'layout.footer.by' | translate }}
-        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
-    </div>`,
+    @if (displayLogo) {
+      <img [src]="displayLogo" [alt]="appName" class="logo-image" />
+    }
+    {{ appName }} {{ 'layout.footer.by' | translate }}
+    <a
+      [href]="authorUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-primary font-bold hover:underline"
+      >{{ authorName }}</a
+    >
+  </div>`,
                 }]
         }] });
 
@@ -413,10 +447,17 @@ class AppConfigurator {
     layoutService = inject(LayoutService);
     presets = Object.keys(presets);
     showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
-    menuModeOptions = computed(() => [
-        { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
-        { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
-    ], ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : []));
+    menuModeOptions = computed(() => {
+        const options = [
+            { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
+            { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
+        ];
+        // Only show topbar mode on desktop
+        if (this.layoutService.isDesktop()) {
+            options.push({ label: this.translate('layout.configurator.menu.mode.topbar'), value: 'topbar' });
+        }
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : []));
     constructor() {
         // Use afterNextRender for browser-only initialization (replaces isServer check)
         afterNextRender(() => {
@@ -904,7 +945,9 @@ const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
 const LAYOUT_NOTIFICATION_BELL = new InjectionToken('LAYOUT_NOTIFICATION_BELL');
 const LAYOUT_LANGUAGE_SELECTOR = new InjectionToken('LAYOUT_LANGUAGE_SELECTOR');
 const LAYOUT_LANGUAGE_SELECTOR_PANEL = new InjectionToken('LAYOUT_LANGUAGE_SELECTOR_PANEL');
+const LAYOUT_SEARCHBAR = new InjectionToken('LAYOUT_SEARCHBAR');
 const LAYOUT_IS_RTL = new InjectionToken('LAYOUT_IS_RTL');
+const LAYOUT_SEARCH_ADAPTER = new InjectionToken('LAYOUT_SEARCH_ADAPTER');
 
 class AppFloatingConfigurator {
     layoutService = inject(LayoutService);
@@ -1008,171 +1051,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
   `, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"] }]
         }] });
 
-/**
- * View Transitions API type definitions
- * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
- */
-
-/** Company/branch switcher displayed in top bar */
-class AppCompanyBranchSelector {
+class AppMenuitem {
+    // Signal inputs
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    parentKey = input('', ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
+    // Injected services
+    router = inject(Router);
+    layoutService = inject(LayoutService);
     destroyRef = inject(DestroyRef);
-    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
-    authApi = inject(LAYOUT_AUTH_API, { optional: true });
-    messageService = inject(MessageService);
-    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
-    document = inject(DOCUMENT$1);
-    elementRef = inject(ElementRef);
-    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
-    isActive = this._isActive.asReadonly();
+    // View references
+    parentLink = viewChild('parentLink', ...(ngDevMode ? [{ debugName: "parentLink" }] : []));
+    // State signals - private writable + public readonly pattern
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    active = this._active.asReadonly();
+    // Computed signals
+    key = computed(() => {
+        const parent = this.parentKey();
+        return parent ? `${parent}-${this.index()}` : String(this.index());
+    }, ...(ngDevMode ? [{ debugName: "key" }] : []));
+    routerLink = computed(() => {
+        const menuItem = this.item();
+        return menuItem.routerLink ?? [];
+    }, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
+    // Computed options for routerLinkActive - use 'exact' for root, 'subset' for others
+    routerLinkActiveOptions = computed(() => {
+        const link = this.routerLink();
+        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
+        return {
+            paths: pathsMatch,
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored',
+        };
+    }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
     constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
-            .subscribe((event) => {
-            const target = event.target;
-            if (!this.elementRef.nativeElement.contains(target)) {
-                this._isActive.set(false);
+        // Subscribe to menu source changes
+        this.layoutService.menuSource$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            Promise.resolve(null).then(() => {
+                const currentKey = this.key();
+                if (value.routeEvent) {
+                    this._active.set(value.key === currentKey ||
+                        value.key?.startsWith(currentKey + '-'));
+                }
+                else if (value.key !== currentKey &&
+                    !value.key?.startsWith(currentKey + '-')) {
+                    this._active.set(false);
+                }
+            });
+        });
+        // Subscribe to menu reset
+        this.layoutService.resetSource$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this._active.set(false));
+        // Subscribe to navigation events
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.item().routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
+        // Effect to update active state on init when item has routerLink
+        effect(() => {
+            const menuItem = this.item();
+            if (menuItem.routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
+        // Effect to update submenu position when active in topbar mode
+        effect(() => {
+            if (this.active() && this.parentLink()) {
+                Promise.resolve().then(() => this.updateSubmenuPosition());
             }
         });
     }
-    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? this.translate('layout.company.branch.selector.no.company'), ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
-    currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
-    _companies = signal([], ...(ngDevMode ? [{ debugName: "_companies" }] : []));
-    companies = this._companies.asReadonly();
-    _branches = signal([], ...(ngDevMode ? [{ debugName: "_branches" }] : []));
-    branches = this._branches.asReadonly();
-    _selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedCompanyId" }] : []));
-    selectedCompanyId = this._selectedCompanyId.asReadonly();
-    _selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedBranchId" }] : []));
-    selectedBranchId = this._selectedBranchId.asReadonly();
-    _isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : []));
-    isLoadingCompanies = this._isLoadingCompanies.asReadonly();
-    _isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingBranches" }] : []));
-    isLoadingBranches = this._isLoadingBranches.asReadonly();
-    _isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "_isSwitching" }] : []));
-    isSwitching = this._isSwitching.asReadonly();
-    canSwitch = computed(() => {
-        const selectedCompany = this.selectedCompanyId();
-        if (!selectedCompany)
-            return false;
-        const currentCompanyId = this.authState?.currentCompanyInfo()?.id;
-        const currentBranchId = this.authState?.currentBranchInfo()?.id;
-        const selectedBranch = this.selectedBranchId();
-        return selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId;
-    }, ...(ngDevMode ? [{ debugName: "canSwitch" }] : []));
-    onPanelToggle() {
-        this._isActive.update((v) => !v);
-        if (this.isActive() && this.companies().length === 0) {
-            this.loadCompanies();
+    onMouseEnter() {
+        if (this.layoutService.isTopbar() && this.item().children) {
+            this.updateSubmenuPosition();
         }
     }
-    loadCompanies() {
-        if (!this.authApi)
+    updateSubmenuPosition() {
+        const linkEl = this.parentLink()?.nativeElement;
+        if (!linkEl)
             return;
-        this._isLoadingCompanies.set(true);
-        this.authApi
-            .getUserCompanies()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (companies) => {
-                this._companies.set(companies);
-                this._isLoadingCompanies.set(false);
-            },
-            error: () => {
-                // Error toast handled by global interceptor
-                this._isLoadingCompanies.set(false);
-            },
-        });
-    }
-    onCompanyChange(companyId) {
-        this._selectedCompanyId.set(companyId);
-        if (!companyId) {
-            this._branches.set([]);
-            this._selectedBranchId.set(null);
+        const rect = linkEl.getBoundingClientRect();
+        const hostEl = linkEl.closest('[app-menuitem]');
+        if (!hostEl)
             return;
-        }
-        this.loadBranches(companyId);
-    }
-    onBranchChange(branchId) {
-        this._selectedBranchId.set(branchId);
+        // Position submenu to the left of the parent link and above it
+        const left = rect.left;
+        const top = rect.top + 30; // 8px gap above the menu item
+        hostEl.style.setProperty('--submenu-left', `${left}px`);
+        hostEl.style.setProperty('--submenu-top', `${top}px`);
     }
-    loadBranches(companyId) {
-        if (!this.authApi)
+    updateActiveStateFromRoute() {
+        const link = this.routerLink();
+        if (!link.length)
             return;
-        this._isLoadingBranches.set(true);
-        this._selectedBranchId.set(null);
-        this.authApi
-            .getCompanyBranches(companyId)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (branches) => {
-                this._branches.set(branches);
-                this._isLoadingBranches.set(false);
-                // Auto-select if only one branch available
-                if (branches.length === 1) {
-                    this._selectedBranchId.set(branches[0].id);
-                }
-            },
-            error: () => {
-                // Error toast handled by global interceptor
-                this._isLoadingBranches.set(false);
-            },
+        // Use 'exact' for root path to avoid matching all routes
+        // Use 'subset' for all other paths to match child routes
+        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
+        const isActive = this.router.isActive(link[0], {
+            paths: pathsMatch,
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored',
         });
-    }
-    onSwitch() {
-        const selectedCompany = this.selectedCompanyId();
-        const selectedBranch = this.selectedBranchId();
-        if (!this.authApi || !selectedCompany)
-            return;
-        if (this.branches().length > 0 && !selectedBranch) {
-            this.messageService.add({
-                severity: 'warn',
-                summary: this.translate('layout.company.branch.selector.branch.required'),
-                detail: this.translate('layout.company.branch.selector.please.select.branch'),
+        if (isActive) {
+            this.layoutService.onMenuStateChange({
+                key: this.key(),
+                routeEvent: true,
             });
-            return;
         }
-        this._isSwitching.set(true);
-        this.authApi
-            .switchCompany(selectedCompany, selectedBranch || '')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: () => { },
-            error: () => {
-                // Error toast handled by global interceptor
-                this._isSwitching.set(false);
-            },
-        });
     }
-    translate(key) {
-        return this.translateAdapter?.translate(key) ?? key;
+    itemClick() {
+        if (this.item().children && !this.layoutService.isTopbar()) {
+            this._active.update((prev) => !prev);
+        }
+        this.layoutService.onMenuStateChange({ key: this.key() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="layout-topbar-action"
-      [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
-      enterFromClass="hidden"
-      enterActiveClass="animate-scalein"
-      leaveToClass="hidden"
-      leaveActiveClass="animate-fadeout"
-      [hideOnOutsideClick]="true"
-      (click)="onPanelToggle()"
-    >
-      <i class="pi pi-building"></i>
-      <span>{{ currentCompanyName() }}</span>
-      @if (currentBranchName()) {
-        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
-      }
-    </button>
-    <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
-      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
-    >
-      <div class="flex flex-col gap-4">
-        <span class="text-sm text-muted-color font-semibold"
-          >{{ 'layout.company.branch.selector.title' | translate }}</span
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, viewQueries: [{ propertyName: "parentLink", first: true, predicate: ["parentLink"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a
+          (click)="itemClick()"
+          (mouseenter)="onMouseEnter()"
+          #parentLink
+          tabindex="0"
+          pRipple
+          [style.cursor]="layoutService.isTopbar() ? 'default' : 'pointer'"
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
+          }}</span>
+          @if (item().children) {
+            @if (layoutService.isTopbar()) {
+              <i class="pi pi-fw pi-chevron-right layout-submenu-toggler"></i>
+            } @else {
+              <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+            }
+          }
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+          pRipple
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
+          }}</span>
+        </a>
+      }
+      @if (item().children) {
+        <ul
+          (mouseenter)="onMouseEnter()"
+          [class.submenu-expanded]="active() && !layoutService.isTopbar()"
+          [class.submenu-collapsed]="!active() && !layoutService.isTopbar()"
+        >
+          @for (
+            child of item().children;
+            track 'menu' + child.id + '' + i;
+            let i = $index
+          ) {
+            <li
+              app-menuitem
+              [item]="child"
+              [index]="i"
+              [parentKey]="key()"
+            ></li>
+          }
+        </ul>
+      }
+    </ng-container>
+  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, decorators: [{
+            type: Component,
+            args: [{ selector: '[app-menuitem]', imports: [IconComponent, RouterModule, RippleModule, TranslatePipe], template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a
+          (click)="itemClick()"
+          (mouseenter)="onMouseEnter()"
+          #parentLink
+          tabindex="0"
+          pRipple
+          [style.cursor]="layoutService.isTopbar() ? 'default' : 'pointer'"
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
+          }}</span>
+          @if (item().children) {
+            @if (layoutService.isTopbar()) {
+              <i class="pi pi-fw pi-chevron-right layout-submenu-toggler"></i>
+            } @else {
+              <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+            }
+          }
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+          pRipple
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
+          }}</span>
+        </a>
+      }
+      @if (item().children) {
+        <ul
+          (mouseenter)="onMouseEnter()"
+          [class.submenu-expanded]="active() && !layoutService.isTopbar()"
+          [class.submenu-collapsed]="!active() && !layoutService.isTopbar()"
+        >
+          @for (
+            child of item().children;
+            track 'menu' + child.id + '' + i;
+            let i = $index
+          ) {
+            <li
+              app-menuitem
+              [item]="child"
+              [index]="i"
+              [parentKey]="key()"
+            ></li>
+          }
+        </ul>
+      }
+    </ng-container>
+  `, host: {
+                        '[class.active-menuitem]': 'active()',
+                    }, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }], parentLink: [{ type: i0.ViewChild, args: ['parentLink', { isSignal: true }] }] } });
+
+/**
+ * Main menu component that displays filtered menu items.
+ * Menu is automatically filtered based on user permissions using the permission checker (logicNode pattern).
+ * The filtering happens internally in LayoutService via computed signal.
+ */
+class AppMenu {
+    layoutService = inject(LayoutService);
+    /**
+     * Filtered menu items from layout service.
+     * This signal is computed in LayoutService and automatically updates when:
+     * - Raw menu changes (setMenu called)
+     * - Permission state changes (user permissions updated)
+     */
+    menuItems = this.layoutService.menu;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
+    <ul>
+      @for (
+        item of menuItems();
+        track 'menu' + item.id + '' + i;
+        let i = $index
+      ) {
+        <li app-menuitem [item]="item" [index]="i"></li>
+      }
+    </ul>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-menu',
+                    imports: [AppMenuitem, RouterModule],
+                    template: `<div class="layout-menu">
+    <ul>
+      @for (
+        item of menuItems();
+        track 'menu' + item.id + '' + i;
+        let i = $index
+      ) {
+        <li app-menuitem [item]="item" [index]="i"></li>
+      }
+    </ul>
+  </div>`,
+                }]
+        }] });
+
+/**
+ * View Transitions API type definitions
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+ */
+
+/** Company/branch switcher displayed in top bar */
+class AppCompanyBranchSelector {
+    destroyRef = inject(DestroyRef);
+    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
+    authApi = inject(LAYOUT_AUTH_API, { optional: true });
+    messageService = inject(MessageService);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    document = inject(DOCUMENT$1);
+    elementRef = inject(ElementRef);
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
+    constructor() {
+        fromEvent(this.document, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
+            .subscribe((event) => {
+            const target = event.target;
+            if (!this.elementRef.nativeElement.contains(target)) {
+                this._isActive.set(false);
+            }
+        });
+    }
+    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? this.translate('layout.company.branch.selector.no.company'), ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
+    _companies = signal([], ...(ngDevMode ? [{ debugName: "_companies" }] : []));
+    companies = this._companies.asReadonly();
+    _branches = signal([], ...(ngDevMode ? [{ debugName: "_branches" }] : []));
+    branches = this._branches.asReadonly();
+    _selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedCompanyId" }] : []));
+    selectedCompanyId = this._selectedCompanyId.asReadonly();
+    _selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedBranchId" }] : []));
+    selectedBranchId = this._selectedBranchId.asReadonly();
+    _isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : []));
+    isLoadingCompanies = this._isLoadingCompanies.asReadonly();
+    _isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingBranches" }] : []));
+    isLoadingBranches = this._isLoadingBranches.asReadonly();
+    _isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "_isSwitching" }] : []));
+    isSwitching = this._isSwitching.asReadonly();
+    canSwitch = computed(() => {
+        const selectedCompany = this.selectedCompanyId();
+        if (!selectedCompany)
+            return false;
+        const currentCompanyId = this.authState?.currentCompanyInfo()?.id;
+        const currentBranchId = this.authState?.currentBranchInfo()?.id;
+        const selectedBranch = this.selectedBranchId();
+        return selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId;
+    }, ...(ngDevMode ? [{ debugName: "canSwitch" }] : []));
+    onPanelToggle() {
+        this._isActive.update((v) => !v);
+        if (this.isActive() && this.companies().length === 0) {
+            this.loadCompanies();
+        }
+    }
+    loadCompanies() {
+        if (!this.authApi)
+            return;
+        this._isLoadingCompanies.set(true);
+        this.authApi
+            .getUserCompanies()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (companies) => {
+                this._companies.set(companies);
+                this._isLoadingCompanies.set(false);
+            },
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isLoadingCompanies.set(false);
+            },
+        });
+    }
+    onCompanyChange(companyId) {
+        this._selectedCompanyId.set(companyId);
+        if (!companyId) {
+            this._branches.set([]);
+            this._selectedBranchId.set(null);
+            return;
+        }
+        this.loadBranches(companyId);
+    }
+    onBranchChange(branchId) {
+        this._selectedBranchId.set(branchId);
+    }
+    loadBranches(companyId) {
+        if (!this.authApi)
+            return;
+        this._isLoadingBranches.set(true);
+        this._selectedBranchId.set(null);
+        this.authApi
+            .getCompanyBranches(companyId)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (branches) => {
+                this._branches.set(branches);
+                this._isLoadingBranches.set(false);
+                // Auto-select if only one branch available
+                if (branches.length === 1) {
+                    this._selectedBranchId.set(branches[0].id);
+                }
+            },
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isLoadingBranches.set(false);
+            },
+        });
+    }
+    onSwitch() {
+        const selectedCompany = this.selectedCompanyId();
+        const selectedBranch = this.selectedBranchId();
+        if (!this.authApi || !selectedCompany)
+            return;
+        if (this.branches().length > 0 && !selectedBranch) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: this.translate('layout.company.branch.selector.branch.required'),
+                detail: this.translate('layout.company.branch.selector.please.select.branch'),
+            });
+            return;
+        }
+        this._isSwitching.set(true);
+        this.authApi
+            .switchCompany(selectedCompany, selectedBranch || '')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => { },
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isSwitching.set(false);
+            },
+        });
+    }
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      [class.layout-topbar-action-highlight]="isActive()"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+      (click)="onPanelToggle()"
+    >
+      <i class="pi pi-building"></i>
+      <span>{{ currentCompanyName() }}</span>
+      @if (currentBranchName()) {
+        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+      }
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
+    >
+      <div class="flex flex-col gap-4">
+        <span class="text-sm text-muted-color font-semibold"
+          >{{ 'layout.company.branch.selector.title' | translate }}</span
         >
 
         <!-- Company Selector -->
@@ -1441,6 +1806,7 @@ class AppProfile {
     layoutService = inject(LayoutService);
     messageService = inject(MessageService);
     translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    appConfig = inject(APP_CONFIG, { optional: true });
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
     _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
@@ -1461,6 +1827,7 @@ class AppProfile {
     userName = computed(() => this.authState?.loginUserData()?.name ?? this.translate('layout.profile.guest'), ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
+    signUpEnabled = computed(() => this.appConfig ? isSignUpEnabled(this.appConfig) : false, ...(ngDevMode ? [{ debugName: "signUpEnabled" }] : []));
     logout() {
         if (!this.authApi)
             return;
@@ -1555,13 +1922,15 @@ class AppProfile {
 
         <!-- Menu Items -->
         <div class="flex flex-col gap-1">
-          <a
-            class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
-            (click)="copySignUpLink()"
-          >
-            <i class="pi pi-link text-muted-color"></i>
-            <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
-          </a>
+          @if (signUpEnabled()) {
+            <a
+              class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
+              (click)="copySignUpLink()"
+            >
+              <i class="pi pi-link text-muted-color"></i>
+              <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
+            </a>
+          }
           <a
             class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
             (click)="logout()"
@@ -1572,7 +1941,7 @@ class AppProfile {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$3.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
@@ -1630,13 +1999,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         <!-- Menu Items -->
         <div class="flex flex-col gap-1">
-          <a
-            class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
-            (click)="copySignUpLink()"
-          >
-            <i class="pi pi-link text-muted-color"></i>
-            <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
-          </a>
+          @if (signUpEnabled()) {
+            <a
+              class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
+              (click)="copySignUpLink()"
+            >
+              <i class="pi pi-link text-muted-color"></i>
+              <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
+            </a>
+          }
           <a
             class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
             (click)="logout()"
@@ -1651,6 +2022,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class AppSearchbar {
+    layoutService = inject(LayoutService);
+    router = inject(Router);
+    searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, {
+        optional: true,
+    });
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT$1);
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    suggestionsOpen = signal(false, ...(ngDevMode ? [{ debugName: "suggestionsOpen" }] : []));
+    suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    isSearchExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isSearchExpanded" }] : []));
+    isResponsive = signal(typeof window !== 'undefined' ? window.innerWidth < 768 : false, ...(ngDevMode ? [{ debugName: "isResponsive" }] : []));
+    searchWrapper = viewChild('searchWrapper', ...(ngDevMode ? [{ debugName: "searchWrapper" }] : []));
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    searchTimeout;
+    constructor() {
+        // Track responsive breakpoint (mobile < 768px)
+        if (typeof window !== 'undefined') {
+            fromEvent(window, 'resize')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.isResponsive.set(window.innerWidth < 768);
+            });
+        }
+        // Close dropdown/search on outside click
+        fromEvent(this.document, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            const wrapper = this.searchWrapper()?.nativeElement;
+            const target = event.target;
+            if (wrapper && !wrapper.contains(target)) {
+                if (this.suggestionsOpen()) {
+                    this.closeSuggestions();
+                }
+                if (this.isSearchExpanded() &&
+                    (this.layoutService.isTopbar() || this.isResponsive())) {
+                    this.closeSearch();
+                }
+            }
+        });
+        // Debounced search for suggestions
+        effect(() => {
+            const query = this.searchTerm();
+            clearTimeout(this.searchTimeout);
+            if (!this.searchAdapter || !query.trim()) {
+                this.suggestions.set([]);
+                this.focusedIndex.set(-1);
+                return;
+            }
+            this.searchTimeout = setTimeout(() => {
+                this.searchAdapter.getSuggestions(query)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((results) => {
+                    this.suggestions.set(results);
+                    this.focusedIndex.set(-1);
+                    this.suggestionsOpen.set(results.length > 0);
+                });
+            }, 300);
+        });
+    }
+    onFocus() {
+        if (this.suggestions().length > 0) {
+            this.suggestionsOpen.set(true);
+        }
+    }
+    handleKeydown(event) {
+        const items = this.suggestions();
+        const current = this.focusedIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedIndex.set(current < items.length - 1 ? current + 1 : 0);
+                this.suggestionsOpen.set(items.length > 0);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedIndex.set(current > 0 ? current - 1 : items.length - 1);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeSuggestions();
+                break;
+        }
+    }
+    handleEnter() {
+        const current = this.focusedIndex();
+        const items = this.suggestions();
+        if (current >= 0 && current < items.length) {
+            this.selectSuggestion(items[current]);
+        }
+        else if (items.length > 0) {
+            this.selectSuggestion(items[0]);
+        }
+        else {
+            this.onSearch();
+        }
+    }
+    selectSuggestion(item) {
+        if (item.routerLink) {
+            this.router.navigate(item.routerLink);
+        }
+        this.searchTerm.set('');
+        this.closeSuggestions();
+        if (this.layoutService.isTopbar() || this.isResponsive()) {
+            this.closeSearch();
+        }
+    }
+    closeSuggestions() {
+        this.suggestionsOpen.set(false);
+        this.focusedIndex.set(-1);
+    }
+    toggleSearch() {
+        this.isSearchExpanded.set(!this.isSearchExpanded());
+        if (this.isSearchExpanded()) {
+            setTimeout(() => {
+                this.searchInput()?.nativeElement?.focus();
+            }, 100);
+        }
+    }
+    closeSearch() {
+        this.isSearchExpanded.set(false);
+        this.closeSuggestions();
+    }
+    onSearch() {
+        // Implement global search if needed
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppSearchbar, isStandalone: true, selector: "app-searchbar", viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="search-container h-full"
+      #searchWrapper
+      [class.topbar-mode]="layoutService.isTopbar() || isResponsive()"
+    >
+      @if (layoutService.isTopbar() || isResponsive()) {
+        <!-- Topbar/Mobile Icon Mode -->
+        <button
+          type="button"
+          pButton
+          pRipple
+          class="search-toggle-btn"
+          icon="pi pi-search"
+          (click)="toggleSearch()"
+          [attr.aria-label]="'layout.topbar.search' | translate"
+          severity="secondary"
+          text
+        ></button>
+
+        @if (isSearchExpanded()) {
+          <div class="search-dropdown-panel">
+            <p-iconfield class="search-iconfield">
+              <p-inputicon class="pi pi-search search-icon" />
+              <input
+                type="text"
+                pInputText
+                class="search-input w-full"
+                [placeholder]="'layout.topbar.search.placeholder' | translate"
+                [(ngModel)]="searchTerm"
+                (keyup.enter)="handleEnter()"
+                (keydown)="handleKeydown($event)"
+                (focus)="onFocus()"
+                [attr.aria-label]="'layout.topbar.search' | translate"
+                #searchInput
+                autocomplete="off"
+              />
+            </p-iconfield>
+
+            @if (suggestionsOpen() && suggestions().length > 0) {
+              <div class="search-suggestions">
+                <ul class="suggestions-list">
+                  @for (
+                    item of suggestions();
+                    track item.label;
+                    let idx = $index
+                  ) {
+                    <li
+                      class="suggestion-item"
+                      [class.focused]="idx === focusedIndex()"
+                      (click)="selectSuggestion(item)"
+                      (mouseenter)="focusedIndex.set(idx)"
+                      role="option"
+                      [attr.aria-selected]="idx === focusedIndex()"
+                    >
+                      @if (item.icon) {
+                        <i [class]="item.icon" class="suggestion-icon"></i>
+                      }
+                      <span class="suggestion-label">{{ item.label }}</span>
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        }
+      } @else {
+        <!-- Desktop Full Input Mode -->
+        <p-iconfield class="search-iconfield">
+          <p-inputicon class="pi pi-search search-icon" (click)="onSearch()" />
+          <input
+            type="text"
+            pInputText
+            class="search-input w-full"
+            [placeholder]="'layout.topbar.search.placeholder' | translate"
+            [(ngModel)]="searchTerm"
+            (keyup.enter)="handleEnter()"
+            (keydown)="handleKeydown($event)"
+            (focus)="onFocus()"
+            [attr.aria-label]="'layout.topbar.search' | translate"
+            #searchInput
+          />
+        </p-iconfield>
+
+        @if (suggestionsOpen() && suggestions().length > 0) {
+          <div class="search-dropdown">
+            <ul class="suggestions-list">
+              @for (item of suggestions(); track item.label; let idx = $index) {
+                <li
+                  class="suggestion-item"
+                  [class.focused]="idx === focusedIndex()"
+                  (click)="selectSuggestion(item)"
+                  (mouseenter)="focusedIndex.set(idx)"
+                  role="option"
+                  [attr.aria-selected]="idx === focusedIndex()"
+                >
+                  @if (item.icon) {
+                    <i [class]="item.icon" class="suggestion-icon"></i>
+                  }
+                  <span class="suggestion-label">{{ item.label }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:0 4px 20px #00000026;z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:0 4px 16px #0000001f;z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:4rem;left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i4$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i2$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSearchbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-searchbar', imports: [AngularModule, PrimeModule, TranslatePipe], template: `
+    <div
+      class="search-container h-full"
+      #searchWrapper
+      [class.topbar-mode]="layoutService.isTopbar() || isResponsive()"
+    >
+      @if (layoutService.isTopbar() || isResponsive()) {
+        <!-- Topbar/Mobile Icon Mode -->
+        <button
+          type="button"
+          pButton
+          pRipple
+          class="search-toggle-btn"
+          icon="pi pi-search"
+          (click)="toggleSearch()"
+          [attr.aria-label]="'layout.topbar.search' | translate"
+          severity="secondary"
+          text
+        ></button>
+
+        @if (isSearchExpanded()) {
+          <div class="search-dropdown-panel">
+            <p-iconfield class="search-iconfield">
+              <p-inputicon class="pi pi-search search-icon" />
+              <input
+                type="text"
+                pInputText
+                class="search-input w-full"
+                [placeholder]="'layout.topbar.search.placeholder' | translate"
+                [(ngModel)]="searchTerm"
+                (keyup.enter)="handleEnter()"
+                (keydown)="handleKeydown($event)"
+                (focus)="onFocus()"
+                [attr.aria-label]="'layout.topbar.search' | translate"
+                #searchInput
+                autocomplete="off"
+              />
+            </p-iconfield>
+
+            @if (suggestionsOpen() && suggestions().length > 0) {
+              <div class="search-suggestions">
+                <ul class="suggestions-list">
+                  @for (
+                    item of suggestions();
+                    track item.label;
+                    let idx = $index
+                  ) {
+                    <li
+                      class="suggestion-item"
+                      [class.focused]="idx === focusedIndex()"
+                      (click)="selectSuggestion(item)"
+                      (mouseenter)="focusedIndex.set(idx)"
+                      role="option"
+                      [attr.aria-selected]="idx === focusedIndex()"
+                    >
+                      @if (item.icon) {
+                        <i [class]="item.icon" class="suggestion-icon"></i>
+                      }
+                      <span class="suggestion-label">{{ item.label }}</span>
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        }
+      } @else {
+        <!-- Desktop Full Input Mode -->
+        <p-iconfield class="search-iconfield">
+          <p-inputicon class="pi pi-search search-icon" (click)="onSearch()" />
+          <input
+            type="text"
+            pInputText
+            class="search-input w-full"
+            [placeholder]="'layout.topbar.search.placeholder' | translate"
+            [(ngModel)]="searchTerm"
+            (keyup.enter)="handleEnter()"
+            (keydown)="handleKeydown($event)"
+            (focus)="onFocus()"
+            [attr.aria-label]="'layout.topbar.search' | translate"
+            #searchInput
+          />
+        </p-iconfield>
+
+        @if (suggestionsOpen() && suggestions().length > 0) {
+          <div class="search-dropdown">
+            <ul class="suggestions-list">
+              @for (item of suggestions(); track item.label; let idx = $index) {
+                <li
+                  class="suggestion-item"
+                  [class.focused]="idx === focusedIndex()"
+                  (click)="selectSuggestion(item)"
+                  (mouseenter)="focusedIndex.set(idx)"
+                  role="option"
+                  [attr.aria-selected]="idx === focusedIndex()"
+                >
+                  @if (item.icon) {
+                    <i [class]="item.icon" class="suggestion-icon"></i>
+                  }
+                  <span class="suggestion-label">{{ item.label }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:0 4px 20px #00000026;z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:0 4px 16px #0000001f;z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:4rem;left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchWrapper: [{ type: i0.ViewChild, args: ['searchWrapper', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
 class AppTopbar {
     appConfig = inject(APP_CONFIG);
     document = inject(DOCUMENT$1);
@@ -1662,7 +2383,12 @@ class AppTopbar {
     languageSelectorComponent = inject(LAYOUT_LANGUAGE_SELECTOR, {
         optional: true,
     });
+    searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, {
+        optional: true,
+    });
+    hasSearchAdapter = computed(() => !!this.searchAdapter, ...(ngDevMode ? [{ debugName: "hasSearchAdapter" }] : []));
     configContainer = viewChild('configContainer', ...(ngDevMode ? [{ debugName: "configContainer" }] : []));
+    navContainer = viewChild('navContainer', ...(ngDevMode ? [{ debugName: "navContainer" }] : []));
     activePanel = signal(null, ...(ngDevMode ? [{ debugName: "activePanel" }] : []));
     constructor() {
         fromEvent(this.document, 'click')
@@ -1670,8 +2396,17 @@ class AppTopbar {
             .subscribe((event) => {
             this.handleOutsideClick(event);
         });
+        effect(() => {
+            const nav = this.navContainer();
+            if (nav && this.layoutService.isTopbar()) {
+                fromEvent(nav.nativeElement, 'scroll')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this.recalculateHoveredSubmenu(nav.nativeElement));
+            }
+        });
     }
     companyName = this.layoutService.companyName;
+    displayLogo = this.layoutService.displayLogo;
     enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
     toggleDarkMode() {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
@@ -1687,22 +2422,67 @@ class AppTopbar {
             this.activePanel.set(null);
         }
     }
+    recalculateHoveredSubmenu(navEl) {
+        const hoveredItems = navEl.querySelectorAll('li:hover');
+        hoveredItems.forEach((li) => {
+            const link = li.querySelector(':scope > a');
+            if (!link)
+                return;
+            const rect = link.getBoundingClientRect();
+            const top = rect.bottom + 12;
+            const left = rect.left - 12;
+            li.style.setProperty('--submenu-left', `${left}px`);
+            li.style.setProperty('--submenu-top', `${top}px`);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }], ngImport: i0, template: ` <div class="layout-topbar">
-    <div class="layout-topbar-logo-container">
-      <button
-        class="layout-menu-button layout-topbar-action"
-        [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
-        (click)="layoutService.onMenuToggle()"
-      >
-        <i class="pi pi-bars"></i>
-      </button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }, { propertyName: "navContainer", first: true, predicate: ["navContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="layout-topbar">
+    <div
+      class="layout-topbar-logo-container"
+      [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
+    >
+      @if (!layoutService.isTopbar() && layoutService.isMobile()) {
+        <button
+          class="layout-menu-button layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <i class="pi pi-bars"></i>
+        </button>
+      }
       <a class="layout-topbar-logo" routerLink="/">
+        @if (displayLogo()) {
+          <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
+        }
         <span>{{ companyName() }}</span>
       </a>
+      @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
+        <button
+          class="layout-menu-button layout-topbar-action layout-topbar-action-right"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <i class="pi pi-bars"></i>
+        </button>
+      }
     </div>
 
+    @if (layoutService.isTopbar() && layoutService.isDesktop()) {
+      <div
+        #navContainer
+        class="layout-topbar-nav-horizontal"
+        [class.layout-topbar-nav-hidden]="
+          !layoutService.layoutState().topbarMenuVisible
+        "
+      >
+        <app-menu />
+      </div>
+    }
+
     <div class="layout-topbar-actions">
+      @if (hasSearchAdapter()) {
+        <app-searchbar />
+      }
       <div class="layout-config-menu">
         <button
           type="button"
@@ -1766,7 +2546,7 @@ class AppTopbar {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppMenu, selector: "app-menu" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }, { kind: "component", type: AppSearchbar, selector: "app-searchbar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
@@ -1778,25 +2558,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         NgComponentOutlet,
                         TranslatePipe,
                         AppConfigurator,
+                        AppMenu,
                         AppProfile,
                         AppCompanyBranchSelector,
                         AppLauncher,
+                        AppSearchbar,
                     ],
-                    template: ` <div class="layout-topbar">
-    <div class="layout-topbar-logo-container">
-      <button
-        class="layout-menu-button layout-topbar-action"
-        [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
-        (click)="layoutService.onMenuToggle()"
-      >
-        <i class="pi pi-bars"></i>
-      </button>
+                    template: `<div class="layout-topbar">
+    <div
+      class="layout-topbar-logo-container"
+      [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
+    >
+      @if (!layoutService.isTopbar() && layoutService.isMobile()) {
+        <button
+          class="layout-menu-button layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <i class="pi pi-bars"></i>
+        </button>
+      }
       <a class="layout-topbar-logo" routerLink="/">
+        @if (displayLogo()) {
+          <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
+        }
         <span>{{ companyName() }}</span>
       </a>
+      @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
+        <button
+          class="layout-menu-button layout-topbar-action layout-topbar-action-right"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <i class="pi pi-bars"></i>
+        </button>
+      }
     </div>
 
+    @if (layoutService.isTopbar() && layoutService.isDesktop()) {
+      <div
+        #navContainer
+        class="layout-topbar-nav-horizontal"
+        [class.layout-topbar-nav-hidden]="
+          !layoutService.layoutState().topbarMenuVisible
+        "
+      >
+        <app-menu />
+      </div>
+    }
+
     <div class="layout-topbar-actions">
+      @if (hasSearchAdapter()) {
+        <app-searchbar />
+      }
       <div class="layout-config-menu">
         <button
           type="button"
@@ -1862,270 +2676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     </div>
   </div>`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { configContainer: [{ type: i0.ViewChild, args: ['configContainer', { isSignal: true }] }] } });
-
-class AppMenuitem {
-    // Signal inputs
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
-    parentKey = input('', ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
-    // Injected services
-    router = inject(Router);
-    layoutService = inject(LayoutService);
-    destroyRef = inject(DestroyRef);
-    // State signals - private writable + public readonly pattern
-    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
-    active = this._active.asReadonly();
-    // Computed signals
-    key = computed(() => {
-        const parent = this.parentKey();
-        return parent ? `${parent}-${this.index()}` : String(this.index());
-    }, ...(ngDevMode ? [{ debugName: "key" }] : []));
-    routerLink = computed(() => {
-        const menuItem = this.item();
-        return menuItem.routerLink ?? [];
-    }, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
-    // Computed options for routerLinkActive - use 'exact' for root, 'subset' for others
-    routerLinkActiveOptions = computed(() => {
-        const link = this.routerLink();
-        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
-        return {
-            paths: pathsMatch,
-            queryParams: 'ignored',
-            matrixParams: 'ignored',
-            fragment: 'ignored',
-        };
-    }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
-    constructor() {
-        // Subscribe to menu source changes
-        this.layoutService.menuSource$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            Promise.resolve(null).then(() => {
-                const currentKey = this.key();
-                if (value.routeEvent) {
-                    this._active.set(value.key === currentKey ||
-                        value.key?.startsWith(currentKey + '-'));
-                }
-                else if (value.key !== currentKey &&
-                    !value.key?.startsWith(currentKey + '-')) {
-                    this._active.set(false);
-                }
-            });
-        });
-        // Subscribe to menu reset
-        this.layoutService.resetSource$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this._active.set(false));
-        // Subscribe to navigation events
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.item().routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-        // Effect to update active state on init when item has routerLink
-        effect(() => {
-            const menuItem = this.item();
-            if (menuItem.routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-    }
-    updateActiveStateFromRoute() {
-        const link = this.routerLink();
-        if (!link.length)
-            return;
-        // Use 'exact' for root path to avoid matching all routes
-        // Use 'subset' for all other paths to match child routes
-        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
-        const isActive = this.router.isActive(link[0], {
-            paths: pathsMatch,
-            queryParams: 'ignored',
-            matrixParams: 'ignored',
-            fragment: 'ignored',
-        });
-        if (isActive) {
-            this.layoutService.onMenuStateChange({
-                key: this.key(),
-                routeEvent: true,
-            });
-        }
-    }
-    itemClick() {
-        if (this.item().children) {
-            this._active.update((prev) => !prev);
-        }
-        this.layoutService.onMenuStateChange({ key: this.key() });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, ngImport: i0, template: `
-    <ng-container>
-      @if (item().children?.length) {
-        <a (click)="itemClick()" tabindex="0" pRipple>
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
-          @if (item().children) {
-            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-          }
-        </a>
-      }
-      @if (item().routerLink && !item().children?.length) {
-        <a
-          (click)="itemClick()"
-          [routerLink]="routerLink()"
-          routerLinkActive="active-route"
-          [routerLinkActiveOptions]="routerLinkActiveOptions()"
-          tabindex="0"
-          pRipple
-        >
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
-        </a>
-      }
-      @if (item().children) {
-        <ul
-          [class.submenu-expanded]="active()"
-          [class.submenu-collapsed]="!active()"
-        >
-          @for (
-            child of item().children;
-            track 'menu' + child.id + '' + i;
-            let i = $index
-          ) {
-            <li
-              app-menuitem
-              [item]="child"
-              [index]="i"
-              [parentKey]="key()"
-            ></li>
-          }
-        </ul>
-      }
-    </ng-container>
-  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, decorators: [{
-            type: Component,
-            args: [{ selector: '[app-menuitem]', imports: [IconComponent, RouterModule, RippleModule, TranslatePipe], template: `
-    <ng-container>
-      @if (item().children?.length) {
-        <a (click)="itemClick()" tabindex="0" pRipple>
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
-          @if (item().children) {
-            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-          }
-        </a>
-      }
-      @if (item().routerLink && !item().children?.length) {
-        <a
-          (click)="itemClick()"
-          [routerLink]="routerLink()"
-          routerLinkActive="active-route"
-          [routerLinkActiveOptions]="routerLinkActiveOptions()"
-          tabindex="0"
-          pRipple
-        >
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{ item().labelKey ? (item().labelKey! | translate) : item().label }}</span>
-        </a>
-      }
-      @if (item().children) {
-        <ul
-          [class.submenu-expanded]="active()"
-          [class.submenu-collapsed]="!active()"
-        >
-          @for (
-            child of item().children;
-            track 'menu' + child.id + '' + i;
-            let i = $index
-          ) {
-            <li
-              app-menuitem
-              [item]="child"
-              [index]="i"
-              [parentKey]="key()"
-            ></li>
-          }
-        </ul>
-      }
-    </ng-container>
-  `, host: {
-                        '[class.active-menuitem]': 'active()',
-                    }, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }] } });
-
-/**
- * Main menu component that displays filtered menu items.
- * Menu is automatically filtered based on user permissions using the permission checker (logicNode pattern).
- * The filtering happens internally in LayoutService via computed signal.
- */
-class AppMenu {
-    layoutService = inject(LayoutService);
-    /**
-     * Filtered menu items from layout service.
-     * This signal is computed in LayoutService and automatically updates when:
-     * - Raw menu changes (setMenu called)
-     * - Permission state changes (user permissions updated)
-     */
-    menuItems = this.layoutService.menu;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
-    <ul>
-      @for (
-        item of menuItems();
-        track 'menu' + item.id + '' + i;
-        let i = $index
-      ) {
-        <li app-menuitem [item]="item" [index]="i"></li>
-      }
-    </ul>
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-menu',
-                    imports: [AppMenuitem, RouterModule],
-                    template: `<div class="layout-menu">
-    <ul>
-      @for (
-        item of menuItems();
-        track 'menu' + item.id + '' + i;
-        let i = $index
-      ) {
-        <li app-menuitem [item]="item" [index]="i"></li>
-      }
-    </ul>
-  </div>`,
-                }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { configContainer: [{ type: i0.ViewChild, args: ['configContainer', { isSignal: true }] }], navContainer: [{ type: i0.ViewChild, args: ['navContainer', { isSignal: true }] }] } });
 
 class AppSidebar {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2177,11 +2728,14 @@ class AppLayout {
     isOutsideClicked(event) {
         const sidebarEl = this.document.querySelector('.layout-sidebar');
         const topbarEl = this.document.querySelector('.layout-menu-button');
+        const topbarNavEl = this.document.querySelector('.layout-topbar-nav');
         const eventTarget = event.target;
         return !(sidebarEl?.isSameNode(eventTarget) ||
             sidebarEl?.contains(eventTarget) ||
             topbarEl?.isSameNode(eventTarget) ||
-            topbarEl?.contains(eventTarget));
+            topbarEl?.contains(eventTarget) ||
+            topbarNavEl?.isSameNode(eventTarget) ||
+            topbarNavEl?.contains(eventTarget));
     }
     hideMenu() {
         this.layoutService.updateLayoutState({
@@ -2207,9 +2761,11 @@ class AppLayout {
         return {
             'layout-overlay': config.menuMode === 'overlay',
             'layout-static': config.menuMode === 'static',
+            'layout-topbar-mode': config.menuMode === 'topbar',
             'layout-static-inactive': state.staticMenuDesktopInactive && config.menuMode === 'static',
             'layout-overlay-active': state.overlayMenuActive,
             'layout-mobile-active': state.staticMenuMobileActive,
+            'layout-topbar-nav-hidden': !state.topbarMenuVisible && config.menuMode === 'topbar',
         };
     }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2301,6 +2857,10 @@ const LAYOUT_MESSAGES = {
     'menu.event.manager': 'Event Manager',
     'menu.notifications': 'Notifications',
     'menu.localization': 'Localization',
+    'menu.projects': 'Projects',
+    'menu.projects.active': 'Active Projects',
+    'menu.projects.archived': 'Archived Projects',
+    'menu.projects.reports': 'Project Reports',
     // Profile
     'layout.profile.title': 'Profile',
     'layout.profile.profile.picture.alt': 'Profile picture',
@@ -2330,6 +2890,7 @@ const LAYOUT_MESSAGES = {
     'layout.configurator.menu.mode': 'Menu Mode',
     'layout.configurator.menu.mode.static': 'Static',
     'layout.configurator.menu.mode.overlay': 'Overlay',
+    'layout.configurator.menu.mode.topbar': 'Topbar',
     // Topbar accessibility
     'layout.topbar.toggle.menu': 'Toggle menu',
     'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
@@ -2348,6 +2909,8 @@ const LAYOUT_MESSAGES = {
     'notification.empty': 'No notifications',
     // Home/Dashboard
     'home.where.users.from': 'Where users are from',
+    'layout.topbar.search': 'Search',
+    'layout.topbar.search.placeholder': 'Search for content...',
 };
 
 // Components
@@ -2356,5 +2919,5 @@ const LAYOUT_MESSAGES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
+export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSearchbar, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
 //# sourceMappingURL=flusys-ng-layout.mjs.map