@flusys/ng-layout 1.1.0 → 1.2.0-rc.1

package/fesm2022/flusys-ng-layout.mjs

@@ -1,32 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, ChangeDetectionStrategy, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
-import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
-import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, DestroyRef, computed, effect, Component, InjectionToken, input, viewChild, ElementRef, Renderer2 } from '@angular/core';
+import * as i3 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, InlineSvgComponent, TranslatePipe, TranslateService, IconComponent, AngularModule } from '@flusys/ng-shared';
+import { isPlatformBrowser, NgComponentOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { APP_CONFIG, 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 * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$2 from '@angular/router';
-import { Router, RouterModule, NavigationEnd } from '@angular/router';
-import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeuix/themes';
-import Aura from '@primeuix/themes/aura';
-import Lara from '@primeuix/themes/lara';
-import Nora from '@primeuix/themes/nora';
-import * as i2 from 'primeng/selectbutton';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i1$1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i2$1 from 'primeng/styleclass';
-import { StyleClassModule } from 'primeng/styleclass';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$1 from '@angular/router';
+import { Router, NavigationEnd, isActive, RouterModule } from '@angular/router';
+import * as i1 from '@flusys/ng-ui';
+import { PRESET_NAMES, applyTheme, SURFACE_PALETTES, PRIMARY_PALETTES, applyPrimaryPalette, applySurfacePalette, UiModule, MessageService } from '@flusys/ng-ui';
+export { applyTheme, buildBootstrapPreset } from '@flusys/ng-ui';
 import { filter } from 'rxjs/operators';
-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 Material from '@primeuix/themes/material';
 
 /** Filter launcher apps based on user permission codes */
 function filterAppsByPermissions(apps, permissionCodes) {
@@ -89,36 +76,11 @@ function filterMenuItem(item, permissionCode) {
 
 const STORAGE_KEY = 'flusys.layout.config';
 const STORAGE_VERSION = 1;
-/**
- * Service for persisting layout configuration to localStorage.
- * Handles loading, saving, and validation of layout preferences with SSR-safe checks.
- *
- * @example
- * ```typescript
- * const persistence = inject(LayoutPersistenceService);
- *
- * // Load saved config
- * const config = persistence.load();
- *
- * // Save config
- * persistence.save({ darkTheme: true, preset: 'Aura' });
- *
- * // Clear saved config
- * persistence.clear();
- * ```
- */
 class LayoutPersistenceService {
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     validPresets = ['Aura', 'Lara', 'Nora'];
-    validMenuModes = ['static', 'overlay'];
-    /**
-     * Load configuration from localStorage.
-     * Returns null if no saved config or invalid data.
-     * SSR-safe (returns null on server).
-     *
-     * @returns Validated layout configuration or null
-     */
+    validMenuModes = ['static', 'overlay', 'topbar'];
     load() {
         if (!this.isBrowser)
             return null;
@@ -134,12 +96,6 @@ class LayoutPersistenceService {
             return null;
         }
     }
-    /**
-     * Save configuration to localStorage.
-     * SSR-safe (no-op on server).
-     *
-     * @param config Layout configuration to save
-     */
     save(config) {
         if (!this.isBrowser)
             return;
@@ -154,64 +110,46 @@ class LayoutPersistenceService {
             // Silent fail - localStorage may be full or disabled
         }
     }
-    /**
-     * Clear stored configuration.
-     * SSR-safe (no-op on server).
-     */
     clear() {
         if (!this.isBrowser)
             return;
         localStorage.removeItem(STORAGE_KEY);
     }
-    /**
-     * Validate and sanitize configuration.
-     * Returns null if version mismatch.
-     *
-     * @param config Configuration to validate
-     * @returns Validated configuration or null
-     */
     validateConfig(config) {
-        // Version mismatch - clear and return null
         if (config._version && config._version !== STORAGE_VERSION) {
             this.clear();
             return null;
         }
-        // Validate preset - silently fix invalid values
         if (config.preset && !this.validPresets.includes(config.preset)) {
             config.preset = 'Aura';
         }
-        // Validate menuMode - silently fix invalid values
         if (config.menuMode && !this.validMenuModes.includes(config.menuMode)) {
             config.menuMode = 'static';
         }
-        // Validate darkTheme
         if (typeof config.darkTheme !== 'boolean') {
             config.darkTheme = false;
         }
-        // Remove version field from returned config
         const { _version, ...cleanConfig } = config;
         return cleanConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutPersistenceService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
-/** Layout configuration and state management service */
+const DESKTOP_BREAKPOINT = 991;
 class LayoutService {
     document = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     persistence = inject(LayoutPersistenceService);
     appConfig = inject(APP_CONFIG, { optional: true });
-    DEFAULT_CONFIG = {
+    DEFAULT_CONFIG = this.appConfig?.layoutConfig ?? {
         preset: 'Aura',
-        primary: 'emerald',
+        primary: 'violet',
         surface: null,
         darkTheme: false,
         menuMode: 'static',
@@ -222,66 +160,101 @@ class LayoutService {
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false,
+        topbarMenuVisible: true,
     };
+    memorable = this.DEFAULT_CONFIG.isMemorable !== false;
     _layoutConfig = signal({
         ...this.DEFAULT_CONFIG,
-        ...this.persistence.load(),
-    }, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
-    _layoutState = signal(this.DEFAULT_STATE, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
-    _transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : []));
+        ...(this.memorable ? this.persistence.load() : null),
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : /* istanbul ignore next */ []));
+    _layoutState = signal(this.DEFAULT_STATE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_layoutState" }] : /* istanbul ignore next */ []));
+    _transitionComplete = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : /* istanbul ignore next */ []));
     layoutConfig = this._layoutConfig.asReadonly();
     layoutState = this._layoutState.asReadonly();
     transitionComplete = this._transitionComplete.asReadonly();
-    _userProfile = signal(null, ...(ngDevMode ? [{ debugName: "_userProfile" }] : []));
-    _companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "_companyProfile" }] : []));
-    _rawMenu = signal([], ...(ngDevMode ? [{ debugName: "_rawMenu" }] : []));
-    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
+    _userProfile = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userProfile" }] : /* istanbul ignore next */ []));
+    _companyProfile = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_companyProfile" }] : /* istanbul ignore next */ []));
+    _rawMenu = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rawMenu" }] : /* istanbul ignore next */ []));
+    _rawApps = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rawApps" }] : /* istanbul ignore next */ []));
     permissionValidator = inject(PermissionValidatorService);
+    destroyRef = inject(DestroyRef);
+    _windowWidth = signal(this.isBrowser ? window.innerWidth : DESKTOP_BREAKPOINT + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_windowWidth" }] : /* istanbul ignore next */ []));
     userProfile = this._userProfile.asReadonly();
     companyProfile = this._companyProfile.asReadonly();
-    // Static app info from config
     appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
+    appLogo = this.appConfig?.appLogo ?? '';
+    isAppLogoSvg = this.appLogo.toLowerCase().endsWith('.svg');
     authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
     authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
-    // Permission-filtered menu and apps
-    menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "menu" }] : []));
-    apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "apps" }] : []));
-    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
-    // Computed signals - Layout
+    menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
+    hasApps = computed(() => this.apps().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasApps" }] : /* istanbul ignore next */ []));
     isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
-        this._layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
-    isDarkTheme = computed(() => this._layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
-    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" }] : []));
-    // User profile computed signals
-    userName = computed(() => this._userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
-    userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
-    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
-    isAuthenticated = computed(() => !!this._userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
+        this._layoutState().staticMenuMobileActive, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : /* istanbul ignore next */ []));
+    isDesktop = computed(() => this._windowWidth() > DESKTOP_BREAKPOINT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
+    isMobile = computed(() => !this.isDesktop(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isDarkTheme = computed(() => this._layoutConfig().darkTheme, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
+    isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+    isTopbar = computed(() => this._layoutConfig().menuMode === 'topbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTopbar" }] : /* istanbul ignore next */ []));
+    userName = computed(() => this._userProfile()?.name ?? 'Guest', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
+    userEmail = computed(() => this._userProfile()?.email ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []));
+    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : /* istanbul ignore next */ []));
+    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : /* istanbul ignore next */ []));
+    isAuthenticated = computed(() => !!this._userProfile(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
     companyName = computed(() => {
         if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig))
             return this.appName;
         return this._companyProfile()?.name ?? this.appName;
-    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
-    // RxJS Subjects for event communication
-    configUpdate = new Subject();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "companyName" }] : /* istanbul ignore next */ []));
+    displayLogo = computed(() => this.companyLogoUrl() ?? this.appLogo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLogo" }] : /* istanbul ignore next */ []));
+    isDisplayLogoSvg = computed(() => this.displayLogo().toLowerCase().endsWith('.svg'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisplayLogoSvg" }] : /* istanbul ignore next */ []));
     overlayOpen = new Subject();
     menuSource = new Subject();
     resetSource = new Subject();
     menuSource$ = this.menuSource.asObservable();
     resetSource$ = this.resetSource.asObservable();
-    configUpdate$ = this.configUpdate.asObservable();
     overlayOpen$ = this.overlayOpen.asObservable();
     initialized = false;
     constructor() {
+        if (this.isBrowser) {
+            this.toggleDarkMode();
+            fromEvent(window, 'resize')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this._windowWidth.set(window.innerWidth);
+            });
+        }
         effect(() => {
             const config = this._layoutConfig();
-            this.configUpdate.next(config);
             if (this.initialized) {
                 this.handleDarkModeTransition(config);
-                this.persistence.save(config);
+                if (this.memorable)
+                    this.persistence.save(config);
             }
             this.initialized = true;
         });
@@ -292,7 +265,8 @@ class LayoutService {
     }
     handleDarkModeTransition(config) {
         const doc = this.document;
-        if ('startViewTransition' in doc && typeof doc.startViewTransition === 'function') {
+        if ('startViewTransition' in doc &&
+            typeof doc.startViewTransition === 'function') {
             doc
                 .startViewTransition(() => this.toggleDarkMode(config))
                 .ready.then(() => this.onTransitionEnd())
@@ -309,31 +283,41 @@ 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;
+            this._layoutState.update((prev) => ({
+                ...prev,
+                staticMenuMobileActive: newMobileActive,
+            }));
+            if (newMobileActive)
+                this.overlayOpen.next();
+            return;
+        }
+        // Desktop: use overlay or static mode
         if (this.isOverlay()) {
             const newOverlayActive = !state.overlayMenuActive;
-            this._layoutState.update((prev) => ({ ...prev, overlayMenuActive: newOverlayActive }));
+            this._layoutState.update((prev) => ({
+                ...prev,
+                overlayMenuActive: newOverlayActive,
+            }));
             if (newOverlayActive)
                 this.overlayOpen.next();
-            return;
         }
-        if (this.isDesktop()) {
+        else {
             this._layoutState.update((prev) => ({
                 ...prev,
                 staticMenuDesktopInactive: !state.staticMenuDesktopInactive,
             }));
         }
-        else {
-            const newMobileActive = !state.staticMenuMobileActive;
-            this._layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: newMobileActive }));
-            if (newMobileActive)
-                this.overlayOpen.next();
-        }
-    }
-    isDesktop() {
-        return this.isBrowser ? window.innerWidth > 991 : true;
-    }
-    isMobile() {
-        return !this.isDesktop();
     }
     onMenuStateChange(event) {
         this.menuSource.next(event);
@@ -341,21 +325,18 @@ class LayoutService {
     reset() {
         this.resetSource.next(true);
     }
-    // Config & state updates
     updateLayoutConfig(config) {
         this._layoutConfig.update((prev) => ({ ...prev, ...config }));
     }
     updateLayoutState(state) {
         this._layoutState.update((prev) => ({ ...prev, ...state }));
     }
-    // Profile setters
     setUserProfile(profile) {
         this._userProfile.set(profile);
     }
     setCompanyProfile(profile) {
         this._companyProfile.set(profile);
     }
-    // Menu & apps
     setMenu(items) {
         this._rawMenu.set(items);
     }
@@ -368,361 +349,128 @@ class LayoutService {
     clearApps() {
         this._rawApps.set([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class AppFooter {
     layoutService = inject(LayoutService);
-    // Footer shows product branding (appName), not user's company
     appName = this.layoutService.appName;
+    displayLogo = this.layoutService.appLogo;
+    isLogoSvg = this.layoutService.isAppLogoSvg;
     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 }} by
-        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
-    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+    @if (displayLogo) {
+      @if (isLogoSvg) {
+        <inline-svg [src]="displayLogo" class="logo-image" />
+      } @else {
+        <img [src]="displayLogo" [alt]="appName" class="logo-image" />
+      }
+    }
+    <span class="hidden sm:inline">
+      {{ appName }} {{ 'layout.footer.by' | translate }}
+      <a
+        [href]="authorUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary font-bold hover:underline"
+        >{{ authorName }}</a
+      >
+    </span>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-footer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TranslatePipe, InlineSvgComponent],
                     template: `<div class="layout-footer">
-        {{ appName }} by
-        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
-    </div>`,
+    @if (displayLogo) {
+      @if (isLogoSvg) {
+        <inline-svg [src]="displayLogo" class="logo-image" />
+      } @else {
+        <img [src]="displayLogo" [alt]="appName" class="logo-image" />
+      }
+    }
+    <span class="hidden sm:inline">
+      {{ appName }} {{ 'layout.footer.by' | translate }}
+      <a
+        [href]="authorUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary font-bold hover:underline"
+        >{{ authorName }}</a
+      >
+    </span>
+  </div>`,
                 }]
         }] });
 
-const presets = {
-    Aura,
-    Lara,
-    Nora,
-};
 class AppConfigurator {
     router = inject(Router);
+    translateAdapter = inject(TranslateService, { optional: true });
+    platformId = inject(PLATFORM_ID);
     layoutService = inject(LayoutService);
-    presets = Object.keys(presets);
-    showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
-    menuModeOptions = [
-        { label: 'Static', value: 'static' },
-        { label: 'Overlay', value: 'overlay' },
-    ];
+    presets = PRESET_NAMES;
+    showMenuModeButton = signal(!this.router.url.includes('auth'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : /* istanbul ignore next */ []));
+    menuModeOptions = computed(() => {
+        const options = [
+            { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
+            { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
+        ];
+        if (this.layoutService.isDesktop()) {
+            options.push({ label: this.translate('layout.configurator.menu.mode.topbar'), value: 'topbar' });
+        }
+        return options;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Use afterNextRender for browser-only initialization (replaces isServer check)
-        afterNextRender(() => {
-            const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
-            this.onPresetChange(preset);
-        });
+        if (isPlatformBrowser(this.platformId)) {
+            effect(() => {
+                const config = this.layoutService.layoutConfig();
+                applyTheme({
+                    preset: (config.preset ?? 'Aura'),
+                    primary: config.primary ?? 'violet',
+                    surface: config.surface ?? null,
+                    darkTheme: config.darkTheme ?? false,
+                });
+            });
+        }
     }
-    surfaces = [
-        {
-            name: 'slate',
-            palette: {
-                0: '#ffffff',
-                50: '#f8fafc',
-                100: '#f1f5f9',
-                200: '#e2e8f0',
-                300: '#cbd5e1',
-                400: '#94a3b8',
-                500: '#64748b',
-                600: '#475569',
-                700: '#334155',
-                800: '#1e293b',
-                900: '#0f172a',
-                950: '#020617',
-            },
-        },
-        {
-            name: 'gray',
-            palette: {
-                0: '#ffffff',
-                50: '#f9fafb',
-                100: '#f3f4f6',
-                200: '#e5e7eb',
-                300: '#d1d5db',
-                400: '#9ca3af',
-                500: '#6b7280',
-                600: '#4b5563',
-                700: '#374151',
-                800: '#1f2937',
-                900: '#111827',
-                950: '#030712',
-            },
-        },
-        {
-            name: 'zinc',
-            palette: {
-                0: '#ffffff',
-                50: '#fafafa',
-                100: '#f4f4f5',
-                200: '#e4e4e7',
-                300: '#d4d4d8',
-                400: '#a1a1aa',
-                500: '#71717a',
-                600: '#52525b',
-                700: '#3f3f46',
-                800: '#27272a',
-                900: '#18181b',
-                950: '#09090b',
-            },
-        },
-        {
-            name: 'neutral',
-            palette: {
-                0: '#ffffff',
-                50: '#fafafa',
-                100: '#f5f5f5',
-                200: '#e5e5e5',
-                300: '#d4d4d4',
-                400: '#a3a3a3',
-                500: '#737373',
-                600: '#525252',
-                700: '#404040',
-                800: '#262626',
-                900: '#171717',
-                950: '#0a0a0a',
-            },
-        },
-        {
-            name: 'stone',
-            palette: {
-                0: '#ffffff',
-                50: '#fafaf9',
-                100: '#f5f5f4',
-                200: '#e7e5e4',
-                300: '#d6d3d1',
-                400: '#a8a29e',
-                500: '#78716c',
-                600: '#57534e',
-                700: '#44403c',
-                800: '#292524',
-                900: '#1c1917',
-                950: '#0c0a09',
-            },
-        },
-        {
-            name: 'soho',
-            palette: {
-                0: '#ffffff',
-                50: '#ececec',
-                100: '#dedfdf',
-                200: '#c4c4c6',
-                300: '#adaeb0',
-                400: '#97979b',
-                500: '#7f8084',
-                600: '#6a6b70',
-                700: '#55565b',
-                800: '#3f4046',
-                900: '#2c2c34',
-                950: '#16161d',
-            },
-        },
-        {
-            name: 'viva',
-            palette: {
-                0: '#ffffff',
-                50: '#f3f3f3',
-                100: '#e7e7e8',
-                200: '#cfd0d0',
-                300: '#b7b8b9',
-                400: '#9fa1a1',
-                500: '#87898a',
-                600: '#6e7173',
-                700: '#565a5b',
-                800: '#3e4244',
-                900: '#262b2c',
-                950: '#0e1315',
-            },
-        },
-        {
-            name: 'ocean',
-            palette: {
-                0: '#ffffff',
-                50: '#fbfcfc',
-                100: '#F7F9F8',
-                200: '#EFF3F2',
-                300: '#DADEDD',
-                400: '#B1B7B6',
-                500: '#828787',
-                600: '#5F7274',
-                700: '#415B61',
-                800: '#29444E',
-                900: '#183240',
-                950: '#0c1920',
-            },
-        },
-    ];
-    selectedPrimaryColor = computed(() => {
-        return this.layoutService.layoutConfig().primary;
-    }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
-    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
-    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...(ngDevMode ? [{ debugName: "selectedPreset" }] : []));
-    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
+    surfaces = Object.entries(SURFACE_PALETTES).map(([name, pal]) => ({
+        name,
+        palette: pal,
+    }));
+    selectedPrimaryColor = computed(() => this.layoutService.layoutConfig().primary, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : /* istanbul ignore next */ []));
+    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : /* istanbul ignore next */ []));
+    isSurfaceSelected(surfaceName) {
+        const sel = this.selectedSurfaceColor();
+        if (sel)
+            return sel === surfaceName;
+        const isDark = this.layoutService.layoutConfig().darkTheme;
+        return isDark ? surfaceName === 'zinc' : surfaceName === 'slate';
+    }
+    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []));
+    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
     primaryColors = computed(() => {
-        const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
-        const colors = [
-            'emerald',
-            'green',
-            'lime',
-            'orange',
-            'amber',
-            'yellow',
-            'teal',
-            'cyan',
-            'sky',
-            'blue',
-            'indigo',
-            'violet',
-            'purple',
-            'fuchsia',
-            'pink',
-            'rose',
-        ];
         const palettes = [{ name: 'noir', palette: {} }];
-        colors.forEach((color) => {
-            palettes.push({
-                name: color,
-                palette: presetPalette?.[color],
-            });
-        });
-        return palettes;
-    }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
-    getPresetExt() {
-        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
-        const preset = this.layoutService.layoutConfig().preset;
-        if (color.name === 'noir') {
-            return {
-                semantic: {
-                    primary: {
-                        50: '{surface.50}',
-                        100: '{surface.100}',
-                        200: '{surface.200}',
-                        300: '{surface.300}',
-                        400: '{surface.400}',
-                        500: '{surface.500}',
-                        600: '{surface.600}',
-                        700: '{surface.700}',
-                        800: '{surface.800}',
-                        900: '{surface.900}',
-                        950: '{surface.950}',
-                    },
-                    colorScheme: {
-                        light: {
-                            primary: {
-                                color: '{primary.950}',
-                                contrastColor: '#ffffff',
-                                hoverColor: '{primary.800}',
-                                activeColor: '{primary.700}',
-                            },
-                            highlight: {
-                                background: '{primary.950}',
-                                focusBackground: '{primary.700}',
-                                color: '#ffffff',
-                                focusColor: '#ffffff',
-                            },
-                        },
-                        dark: {
-                            primary: {
-                                color: '{primary.50}',
-                                contrastColor: '{primary.950}',
-                                hoverColor: '{primary.200}',
-                                activeColor: '{primary.300}',
-                            },
-                            highlight: {
-                                background: '{primary.50}',
-                                focusBackground: '{primary.300}',
-                                color: '{primary.950}',
-                                focusColor: '{primary.950}',
-                            },
-                        },
-                    },
-                },
-            };
-        }
-        else {
-            if (preset === 'Nora') {
-                return {
-                    semantic: {
-                        primary: color.palette,
-                        colorScheme: {
-                            light: {
-                                primary: {
-                                    color: '{primary.600}',
-                                    contrastColor: '#ffffff',
-                                    hoverColor: '{primary.700}',
-                                    activeColor: '{primary.800}',
-                                },
-                                highlight: {
-                                    background: '{primary.600}',
-                                    focusBackground: '{primary.700}',
-                                    color: '#ffffff',
-                                    focusColor: '#ffffff',
-                                },
-                            },
-                            dark: {
-                                primary: {
-                                    color: '{primary.500}',
-                                    contrastColor: '{surface.900}',
-                                    hoverColor: '{primary.400}',
-                                    activeColor: '{primary.300}',
-                                },
-                                highlight: {
-                                    background: '{primary.500}',
-                                    focusBackground: '{primary.400}',
-                                    color: '{surface.900}',
-                                    focusColor: '{surface.900}',
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-            else {
-                return {
-                    semantic: {
-                        primary: color.palette,
-                        colorScheme: {
-                            light: {
-                                primary: {
-                                    color: '{primary.500}',
-                                    contrastColor: '#ffffff',
-                                    hoverColor: '{primary.600}',
-                                    activeColor: '{primary.700}',
-                                },
-                                highlight: {
-                                    background: '{primary.50}',
-                                    focusBackground: '{primary.100}',
-                                    color: '{primary.700}',
-                                    focusColor: '{primary.800}',
-                                },
-                            },
-                            dark: {
-                                primary: {
-                                    color: '{primary.400}',
-                                    contrastColor: '{surface.900}',
-                                    hoverColor: '{primary.300}',
-                                    activeColor: '{primary.200}',
-                                },
-                                highlight: {
-                                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                                    color: 'rgba(255,255,255,.87)',
-                                    focusColor: 'rgba(255,255,255,.87)',
-                                },
-                            },
-                        },
-                    },
-                };
-            }
+        for (const [name, pal] of Object.entries(PRIMARY_PALETTES)) {
+            palettes.push({ name, palette: pal });
         }
-    }
+        return palettes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []));
     updateColors(event, type, color) {
         if (type === 'primary') {
             this.layoutService.updateLayoutConfig({ primary: color.name });
@@ -730,291 +478,727 @@ class AppConfigurator {
         else if (type === 'surface') {
             this.layoutService.updateLayoutConfig({ surface: color.name });
         }
-        this.applyTheme(type, color);
+        this._applyColorChange(type, color);
         event.stopPropagation();
     }
-    applyTheme(type, color) {
+    _applyColorChange(type, color) {
+        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
         if (type === 'primary') {
-            updatePreset(this.getPresetExt());
+            const primary = color.name ?? 'violet';
+            const pal = primary === 'noir'
+                ? Object.fromEntries(Object.entries(SURFACE_PALETTES['slate']).map(([k, v]) => [k, v]))
+                : PRIMARY_PALETTES[primary];
+            if (pal)
+                applyPrimaryPalette(pal, isDark);
         }
         else if (type === 'surface') {
-            updateSurfacePalette(color.palette);
+            const surfacePal = SURFACE_PALETTES[color.name ?? 'slate'];
+            if (surfacePal)
+                applySurfacePalette(surfacePal);
         }
     }
     onPresetChange(event) {
         this.layoutService.updateLayoutConfig({ preset: event });
-        const preset = presets[event];
-        // Use selected surface or default (slate for light, zinc for dark)
-        const selectedSurface = this.selectedSurfaceColor();
-        const defaultSurface = this.layoutService.layoutConfig().darkTheme ? 'zinc' : 'slate';
-        const surfacePalette = this.surfaces.find((s) => s.name === (selectedSurface || defaultSurface))?.palette;
-        $t()
-            .preset(preset)
-            .preset(this.getPresetExt())
-            .surfacePalette(surfacePalette)
-            .use({ useDefaultOptions: true });
+        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
+        const primary = this.layoutService.layoutConfig().primary ?? 'violet';
+        const surface = this.layoutService.layoutConfig().surface ?? null;
+        applyTheme({ preset: event, primary, surface, darkTheme: isDark });
     }
     onMenuModeChange(event) {
         this.layoutService.updateLayoutConfig({ menuMode: event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 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)]" }, ngImport: i0, template: `
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl" }, ngImport: i0, template: `
     <div class="flex flex-col gap-4">
       <div>
-        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.primary' | translate
+        }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (primaryColor of primaryColors(); track primaryColor.name) {
             <button
               type="button"
               [title]="primaryColor.name"
               (click)="updateColors($event, 'primary', primaryColor)"
-            [ngClass]="{
-              'outline-primary': primaryColor.name === selectedPrimaryColor()
-            }"
+              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
+              [style.background-color]="
+                primaryColor?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : primaryColor?.palette?.['500']
+              "
             ></button>
           }
         </div>
       </div>
       <div>
-        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.surface' | translate
+        }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (surface of surfaces; track surface.name) {
             <button
               type="button"
               [title]="surface.name"
               (click)="updateColors($event, 'surface', surface)"
-            [ngClass]="{
-              'outline-primary': selectedSurfaceColor()
-                ? selectedSurfaceColor() === surface.name
-                : layoutService.layoutConfig().darkTheme
-                ? surface.name === 'zinc'
-                : surface.name === 'slate'
-            }"
+              [class.outline-primary]="isSurfaceSelected(surface.name)"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
+              [style.background-color]="
+                surface?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : surface?.palette?.['500']
+              "
             ></button>
           }
         </div>
       </div>
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Presets</span>
-        <p-selectbutton
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.presets' | translate
+        }}</span>
+        <f-selectbutton
           [options]="presets"
           [ngModel]="selectedPreset()"
           (ngModelChange)="onPresetChange($event)"
           [allowEmpty]="false"
           size="small"
-          />
+        />
       </div>
       @if (showMenuModeButton()) {
         <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-          <p-selectbutton
+          <span class="text-sm text-muted-color font-semibold">{{
+            'layout.configurator.menu.mode' | translate
+          }}</span>
+          <f-selectbutton
             [ngModel]="menuMode()"
             (ngModelChange)="onMenuModeChange($event)"
-            [options]="menuModeOptions"
+            [options]="menuModeOptions()"
             [allowEmpty]="false"
             size="small"
-            />
+          />
         </div>
       }
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.SelectButtonComponent, selector: "f-selectbutton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "multiple", "disabled", "invalid", "allowEmpty", "size", "styleClass", "style"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, FormsModule, SelectButtonModule],
+                    imports: [UiModule, FormsModule, TranslatePipe],
                     template: `
     <div class="flex flex-col gap-4">
       <div>
-        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.primary' | translate
+        }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (primaryColor of primaryColors(); track primaryColor.name) {
             <button
               type="button"
               [title]="primaryColor.name"
               (click)="updateColors($event, 'primary', primaryColor)"
-            [ngClass]="{
-              'outline-primary': primaryColor.name === selectedPrimaryColor()
-            }"
+              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
+              [style.background-color]="
+                primaryColor?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : primaryColor?.palette?.['500']
+              "
             ></button>
           }
         </div>
       </div>
       <div>
-        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.surface' | translate
+        }}</span>
         <div class="pt-2 flex gap-2 flex-wrap justify-start">
           @for (surface of surfaces; track surface.name) {
             <button
               type="button"
               [title]="surface.name"
               (click)="updateColors($event, 'surface', surface)"
-            [ngClass]="{
-              'outline-primary': selectedSurfaceColor()
-                ? selectedSurfaceColor() === surface.name
-                : layoutService.layoutConfig().darkTheme
-                ? surface.name === 'zinc'
-                : surface.name === 'slate'
-            }"
+              [class.outline-primary]="isSurfaceSelected(surface.name)"
               class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
+              [style.background-color]="
+                surface?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : surface?.palette?.['500']
+              "
             ></button>
           }
         </div>
       </div>
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Presets</span>
-        <p-selectbutton
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.presets' | translate
+        }}</span>
+        <f-selectbutton
           [options]="presets"
           [ngModel]="selectedPreset()"
           (ngModelChange)="onPresetChange($event)"
           [allowEmpty]="false"
           size="small"
-          />
+        />
       </div>
       @if (showMenuModeButton()) {
         <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-          <p-selectbutton
+          <span class="text-sm text-muted-color font-semibold">{{
+            'layout.configurator.menu.mode' | translate
+          }}</span>
+          <f-selectbutton
             [ngModel]="menuMode()"
             (ngModelChange)="onMenuModeChange($event)"
-            [options]="menuModeOptions"
+            [options]="menuModeOptions()"
             [allowEmpty]="false"
             size="small"
-            />
+          />
         </div>
       }
     </div>
-    `,
+  `,
                     host: {
-                        class: 'hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 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)]',
-                        style: 'background-color: var(--surface-overlay)',
+                        class: 'hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl',
+                        style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
                     },
                 }]
         }], ctorParameters: () => [] });
 
+const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
+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);
-    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    languageSelectorPanel = inject(LAYOUT_LANGUAGE_SELECTOR_PANEL, {
+        optional: true,
+    });
+    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
     toggleDarkMode() {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
         this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
-        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
-            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
-            <div class="relative">
-                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
-                <app-configurator />
-            </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+    <div
+      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
+    >
+      <button
+        fButton
+        type="button"
+        (click)="toggleDarkMode()"
+        [rounded]="true"
+        severity="secondary"
+      >
+        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
+      </button>
+      @if (languageSelectorPanel) {
+        <div class="relative">
+          <button
+            fButton
+            fStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+            type="button"
+            rounded
+          >
+            <ui-icon pButtonIcon name="globe"></ui-icon>
+          </button>
+          <ng-container *ngComponentOutlet="languageSelectorPanel" />
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: "component", type: AppConfigurator, selector: "app-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      }
+      <div class="relative">
+        <button
+          fButton
+          fStyleClass="@next"
+          enterFromClass="hidden"
+          enterActiveClass="animate-scalein"
+          leaveToClass="hidden"
+          leaveActiveClass="animate-fadeout"
+          [hideOnOutsideClick]="true"
+          type="button"
+          rounded
+        >
+          <ui-icon pButtonIcon name="palette"></ui-icon>
+        </button>
+        <app-configurator />
+      </div>
+    </div>
+  `, isInline: true, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'app-floating-configurator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [ButtonModule, StyleClassModule, AppConfigurator],
-                    template: `
-        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
-            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
-            <div class="relative">
-                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
-                <app-configurator />
-            </div>
+            args: [{ selector: 'app-floating-configurator', imports: [NgComponentOutlet, UiModule, AppConfigurator], template: `
+    <div
+      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
+    >
+      <button
+        fButton
+        type="button"
+        (click)="toggleDarkMode()"
+        [rounded]="true"
+        severity="secondary"
+      >
+        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
+      </button>
+      @if (languageSelectorPanel) {
+        <div class="relative">
+          <button
+            fButton
+            fStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+            type="button"
+            rounded
+          >
+            <ui-icon pButtonIcon name="globe"></ui-icon>
+          </button>
+          <ng-container *ngComponentOutlet="languageSelectorPanel" />
         </div>
-    `
-                }]
+      }
+      <div class="relative">
+        <button
+          fButton
+          fStyleClass="@next"
+          enterFromClass="hidden"
+          enterActiveClass="animate-scalein"
+          leaveToClass="hidden"
+          leaveActiveClass="animate-fadeout"
+          [hideOnOutsideClick]="true"
+          type="button"
+          rounded
+        >
+          <ui-icon pButtonIcon name="palette"></ui-icon>
+        </button>
+        <app-configurator />
+      </div>
+    </div>
+  `, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"] }]
         }] });
 
-const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
-const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
-
-/**
- * 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(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    index = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    parentKey = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []));
+    // 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);
-    document = inject(DOCUMENT$1);
-    elementRef = inject(ElementRef);
-    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
-    isActive = this._isActive.asReadonly();
+    // View references
+    parentLink = viewChild('parentLink', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentLink" }] : /* istanbul ignore next */ []));
+    // State signals - private writable + public readonly pattern
+    _active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    active = this._active.asReadonly();
+    // Computed signals
+    key = computed(() => {
+        const parent = this.parentKey();
+        return parent ? `${parent}-${this.index()}` : String(this.index());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    routerLink = computed(() => {
+        const menuItem = this.item();
+        return menuItem.routerLink ?? [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    // 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',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     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 ?? '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 || typeof linkEl.getBoundingClientRect !== 'function')
             return;
-        this._isLoadingCompanies.set(true);
-        this.authApi
-            .getUserCompanies()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (companies) => {
-                this._companies.set(companies);
-                this._isLoadingCompanies.set(false);
-            },
+        const rect = linkEl.getBoundingClientRect();
+        const hostEl = linkEl.closest('[app-menuitem]');
+        if (!hostEl)
+            return;
+        // 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`);
+    }
+    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 active = isActive(link[0], this.router, {
+            paths: pathsMatch,
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored',
+        })();
+        if (active) {
+            this.layoutService.onMenuStateChange({
+                key: this.key(),
+                routeEvent: true,
+            });
+        }
+    }
+    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: "22.0.6", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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"
+        >
+          @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()) {
+              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
+            } @else {
+              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
+            }
+          }
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+        >
+          @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: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenuitem, decorators: [{
+            type: Component,
+            args: [{ selector: '[app-menuitem]', imports: [UiModule, IconComponent, RouterModule, TranslatePipe], template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a
+          (click)="itemClick()"
+          (mouseenter)="onMouseEnter()"
+          #parentLink
+          tabindex="0"
+        >
+          @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()) {
+              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
+            } @else {
+              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
+            }
+          }
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+        >
+          @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: "22.0.6", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: "22.0.6", 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(TranslateService, {
+        optional: true,
+    });
+    document = inject(DOCUMENT$1);
+    elementRef = inject(ElementRef);
+    _isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
+    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'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []));
+    currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentBranchName" }] : /* istanbul ignore next */ []));
+    _companies = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_companies" }] : /* istanbul ignore next */ []));
+    companies = this._companies.asReadonly();
+    _branches = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_branches" }] : /* istanbul ignore next */ []));
+    branches = this._branches.asReadonly();
+    _selectedCompanyId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedCompanyId" }] : /* istanbul ignore next */ []));
+    selectedCompanyId = this._selectedCompanyId.asReadonly();
+    _selectedBranchId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedBranchId" }] : /* istanbul ignore next */ []));
+    selectedBranchId = this._selectedBranchId.asReadonly();
+    _isLoadingCompanies = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : /* istanbul ignore next */ []));
+    isLoadingCompanies = this._isLoadingCompanies.asReadonly();
+    _isLoadingBranches = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoadingBranches" }] : /* istanbul ignore next */ []));
+    isLoadingBranches = this._isLoadingBranches.asReadonly();
+    _isSwitching = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isSwitching" }] : /* istanbul ignore next */ []));
+    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);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSwitch" }] : /* istanbul ignore next */ []));
+    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);
@@ -1064,8 +1248,8 @@ class AppCompanyBranchSelector {
         if (this.branches().length > 0 && !selectedBranch) {
             this.messageService.add({
                 severity: 'warn',
-                summary: 'Branch Required',
-                detail: 'Please select a branch',
+                summary: this.translate('layout.company.branch.selector.branch.required'),
+                detail: this.translate('layout.company.branch.selector.please.select.branch'),
             });
             return;
         }
@@ -1081,13 +1265,16 @@ class AppCompanyBranchSelector {
             },
         });
     }
-    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: `
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1095,31 +1282,35 @@ class AppCompanyBranchSelector {
       [hideOnOutsideClick]="true"
       (click)="onPanelToggle()"
     >
-      <i class="pi pi-building"></i>
+      <ui-icon name="building"></ui-icon>
       <span>{{ currentCompanyName() }}</span>
       @if (currentBranchName()) {
-        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+        <span class="text-xs opacity-70 ml-1">| {{ currentBranchName() }}</span>
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl 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"
-          >Switch Company & Branch</span
-        >
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.company.branch.selector.title' | translate
+        }}</span>
 
         <!-- Company Selector -->
         <div class="flex flex-col gap-2">
-          <label class="text-sm text-muted-color font-semibold">Company</label>
-          <p-select
+          <label class="text-sm text-muted-color font-semibold">{{
+            'shared.company' | translate
+          }}</label>
+          <f-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
             optionLabel="name"
             optionValue="id"
-            placeholder="Select Company"
+            [placeholder]="
+              'layout.company.branch.selector.select.company' | translate
+            "
             class="w-full"
             [loading]="isLoadingCompanies()"
           />
@@ -1128,14 +1319,18 @@ class AppCompanyBranchSelector {
         <!-- Branch Selector -->
         @if (selectedCompanyId() && branches().length > 0) {
           <div class="flex flex-col gap-2">
-            <label class="text-sm text-muted-color font-semibold">Branch</label>
-            <p-select
+            <label class="text-sm text-muted-color font-semibold">{{
+              'layout.company.branch.selector.branch' | translate
+            }}</label>
+            <f-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
               optionLabel="name"
               optionValue="id"
-              placeholder="Select Branch"
+              [placeholder]="
+                'layout.company.branch.selector.select.branch' | translate
+              "
               class="w-full"
               [loading]="isLoadingBranches()"
             />
@@ -1144,32 +1339,37 @@ class AppCompanyBranchSelector {
 
         <!-- Actions -->
         <div class="flex gap-2 pt-2">
-          <p-button
-            label="Switch"
-            icon="pi pi-sync"
-            styleClass="flex-1"
-            [loading]="isSwitching()"
-            [disabled]="!canSwitch()"
-            (onClick)="onSwitch()"
-          />
+          <button
+            fButton
+            class="flex-1"
+            [disabled]="!canSwitch() || isSwitching()"
+            (click)="onSwitch()"
+          >
+            @if (isSwitching()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            } @else {
+              <ui-icon pButtonIcon name="sync"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'layout.company.branch.selector.switch.button' | translate }}</span>
+          </button>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { 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: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
+                    imports: [UiModule, AngularModule,
+                        TranslatePipe,],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1177,31 +1377,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       [hideOnOutsideClick]="true"
       (click)="onPanelToggle()"
     >
-      <i class="pi pi-building"></i>
+      <ui-icon name="building"></ui-icon>
       <span>{{ currentCompanyName() }}</span>
       @if (currentBranchName()) {
-        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+        <span class="text-xs opacity-70 ml-1">| {{ currentBranchName() }}</span>
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl 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"
-          >Switch Company & Branch</span
-        >
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.company.branch.selector.title' | translate
+        }}</span>
 
         <!-- Company Selector -->
         <div class="flex flex-col gap-2">
-          <label class="text-sm text-muted-color font-semibold">Company</label>
-          <p-select
+          <label class="text-sm text-muted-color font-semibold">{{
+            'shared.company' | translate
+          }}</label>
+          <f-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
             optionLabel="name"
             optionValue="id"
-            placeholder="Select Company"
+            [placeholder]="
+              'layout.company.branch.selector.select.company' | translate
+            "
             class="w-full"
             [loading]="isLoadingCompanies()"
           />
@@ -1210,14 +1414,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- Branch Selector -->
         @if (selectedCompanyId() && branches().length > 0) {
           <div class="flex flex-col gap-2">
-            <label class="text-sm text-muted-color font-semibold">Branch</label>
-            <p-select
+            <label class="text-sm text-muted-color font-semibold">{{
+              'layout.company.branch.selector.branch' | translate
+            }}</label>
+            <f-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
               optionLabel="name"
               optionValue="id"
-              placeholder="Select Branch"
+              [placeholder]="
+                'layout.company.branch.selector.select.branch' | translate
+              "
               class="w-full"
               [loading]="isLoadingBranches()"
             />
@@ -1226,14 +1434,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         <!-- Actions -->
         <div class="flex gap-2 pt-2">
-          <p-button
-            label="Switch"
-            icon="pi pi-sync"
-            styleClass="flex-1"
-            [loading]="isSwitching()"
-            [disabled]="!canSwitch()"
-            (onClick)="onSwitch()"
-          />
+          <button
+            fButton
+            class="flex-1"
+            [disabled]="!canSwitch() || isSwitching()"
+            (click)="onSwitch()"
+          >
+            @if (isSwitching()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            } @else {
+              <ui-icon pButtonIcon name="sync"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'layout.company.branch.selector.switch.button' | translate }}</span>
+          </button>
         </div>
       </div>
     </div>
@@ -1242,15 +1455,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], ctorParameters: () => [] });
 
 class AppLauncher {
+    layoutService = inject(LayoutService);
     destroyRef = inject(DestroyRef);
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    layoutService = inject(LayoutService);
-    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    _isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
     isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this._isActive()))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
@@ -1258,114 +1472,129 @@ class AppLauncher {
             }
         });
     }
-    togglePanel() {
+    toggleActive() {
         this._isActive.update((v) => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
       leaveActiveClass="animate-fadeout"
       [hideOnOutsideClick]="true"
-      (click)="togglePanel()"
+      (click)="toggleActive()"
     >
-      <i class="pi pi-th-large"></i>
-      <span>Apps</span>
+      <ui-icon name="th-large"></ui-icon>
+      <span>{{ 'layout.launcher.apps' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 border border-surface rounded-border origin-top surface-overlay"
+      style="inset-inline-end: 0; min-width: 16rem; max-width: 22rem; width: calc(100vw - 2rem); box-shadow: var(--f-shadow-xl);"
     >
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Applications</span>
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      <div class="px-4 py-3 border-b border-surface">
+        <span class="text-xs font-semibold tracking-wide text-muted-color">{{
+          'layout.launcher.applications' | translate
+        }}</span>
+      </div>
+      @if (layoutService.apps().length === 0) {
+        <div class="px-4 py-6 text-center text-muted-color text-sm">
+          {{ 'layout.launcher.no.apps' | translate }}
+        </div>
+      } @else {
+        <div class="p-3 grid grid-cols-3 gap-1">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center gap-2 p-3 rounded-border cursor-pointer no-underline transition-colors duration-150 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
             >
               <div
-                class="flex items-center justify-center w-10 h-10 rounded-border bg-emphasis group-hover:bg-primary transition-all duration-200"
+                class="flex items-center justify-center w-9 h-9 rounded-border bg-primary/10 group-hover:bg-primary transition-colors duration-150"
               >
-                <lib-icon
-                  [icon]="app.icon"
-                  [iconType]="app.iconType"
-                  class="text-xl text-primary group-hover:text-primary-contrast transition-colors duration-200"
-                />
+                <ui-icon
+                  [name]="app.icon"
+                  class="text-base text-primary group-hover:text-primary-contrast transition-colors duration-150"
+                ></ui-icon>
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
-                >{{ app.name }}</span
+                class="text-xs text-center text-muted-color group-hover:text-color transition-colors duration-150 truncate w-full text-center leading-tight"
               >
+                {{ app.nameKey ? (app.nameKey | translate) : app.name }}
+              </span>
             </a>
           }
         </div>
-      </div>
+      }
     </div>
-  `, isInline: true, dependencies: [{ 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: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLauncher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLauncher, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-launcher',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [StyleClassModule, IconComponent],
+                    imports: [UiModule, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
       leaveActiveClass="animate-fadeout"
       [hideOnOutsideClick]="true"
-      (click)="togglePanel()"
+      (click)="toggleActive()"
     >
-      <i class="pi pi-th-large"></i>
-      <span>Apps</span>
+      <ui-icon name="th-large"></ui-icon>
+      <span>{{ 'layout.launcher.apps' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 border border-surface rounded-border origin-top surface-overlay"
+      style="inset-inline-end: 0; min-width: 16rem; max-width: 22rem; width: calc(100vw - 2rem); box-shadow: var(--f-shadow-xl);"
     >
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">Applications</span>
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      <div class="px-4 py-3 border-b border-surface">
+        <span class="text-xs font-semibold tracking-wide text-muted-color">{{
+          'layout.launcher.applications' | translate
+        }}</span>
+      </div>
+      @if (layoutService.apps().length === 0) {
+        <div class="px-4 py-6 text-center text-muted-color text-sm">
+          {{ 'layout.launcher.no.apps' | translate }}
+        </div>
+      } @else {
+        <div class="p-3 grid grid-cols-3 gap-1">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center gap-2 p-3 rounded-border cursor-pointer no-underline transition-colors duration-150 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
             >
               <div
-                class="flex items-center justify-center w-10 h-10 rounded-border bg-emphasis group-hover:bg-primary transition-all duration-200"
+                class="flex items-center justify-center w-9 h-9 rounded-border bg-primary/10 group-hover:bg-primary transition-colors duration-150"
               >
-                <lib-icon
-                  [icon]="app.icon"
-                  [iconType]="app.iconType"
-                  class="text-xl text-primary group-hover:text-primary-contrast transition-colors duration-200"
-                />
+                <ui-icon
+                  [name]="app.icon"
+                  class="text-base text-primary group-hover:text-primary-contrast transition-colors duration-150"
+                ></ui-icon>
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
-                >{{ app.name }}</span
+                class="text-xs text-center text-muted-color group-hover:text-color transition-colors duration-150 truncate w-full text-center leading-tight"
               >
+                {{ app.nameKey ? (app.nameKey | translate) : app.name }}
+              </span>
             </a>
           }
         </div>
-      </div>
+      }
     </div>
   `,
                 }]
@@ -1377,9 +1606,14 @@ class AppProfile {
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
     layoutService = inject(LayoutService);
     messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    appConfig = inject(APP_CONFIG, { optional: true });
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    _isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
     isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
@@ -1394,9 +1628,15 @@ class AppProfile {
     togglePanel() {
         this._isActive.update((v) => !v);
     }
-    userName = computed(() => this.authState?.loginUserData()?.name ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
-    userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
+    userName = computed(() => this.authState?.loginUserData()?.name ??
+        this.translate('layout.profile.guest'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
+    userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []));
+    profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "profilePicture" }] : /* istanbul ignore next */ []));
+    signUpEnabled = computed(() => this.appConfig ? isSignUpEnabled(this.appConfig) : false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "signUpEnabled" }] : /* istanbul ignore next */ []));
     logout() {
         if (!this.authApi)
             return;
@@ -1405,10 +1645,13 @@ class AppProfile {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (result) => {
+                const r = result;
                 this.messageService.add({
                     severity: 'success',
-                    summary: 'Success!',
-                    detail: result.message,
+                    summary: this.translate('shared.success'),
+                    detail: r?.messageKey
+                        ? this.translate(r.messageKey, r.messageVariables)
+                        : (r?.message ?? ''),
                 });
                 this.authApi?.navigateLogin(false);
             },
@@ -1425,25 +1668,28 @@ class AppProfile {
             .then(() => {
             this.messageService.add({
                 severity: 'success',
-                summary: 'Link Copied',
-                detail: 'Sign Up Link copied.',
+                summary: this.translate('layout.profile.link.copied'),
+                detail: this.translate('layout.profile.sign.up.link.copied'),
             });
         })
             .catch(() => {
             this.messageService.add({
                 severity: 'error',
-                summary: 'Sorry',
-                detail: 'Failed to copy signup link.',
+                summary: this.translate('shared.error'),
+                detail: this.translate('layout.profile.failed.copy.sign.up.link'),
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1451,12 +1697,12 @@ class AppProfile {
       [hideOnOutsideClick]="true"
       (click)="togglePanel()"
     >
-      <i class="pi pi-user"></i>
-      <span>Profile</span>
+      <ui-icon name="user"></ui-icon>
+      <span>{{ 'layout.profile.title' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-3">
         <!-- User Info -->
@@ -1468,18 +1714,22 @@ class AppProfile {
             <img
               [src]="profilePicture()"
               class="w-12 h-12 rounded-border object-cover"
-              alt="Profile"
+              [alt]="'layout.profile.profile.picture.alt' | translate"
             />
           } @else {
             <div
               class="w-12 h-12 rounded-border bg-primary flex items-center justify-center"
             >
-              <i class="pi pi-user text-xl text-primary-contrast"></i>
+              <ui-icon name="user" class="text-xl text-primary-contrast"></ui-icon>
             </div>
           }
           <div class="flex flex-col min-w-0 flex-1">
-            <span class="font-semibold text-color truncate">{{ userName() }}</span>
-            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
+            <span class="font-semibold text-color truncate">{{
+              userName()
+            }}</span>
+            <span class="text-sm text-muted-color truncate">{{
+              userEmail()
+            }}</span>
           </div>
         </a>
 
@@ -1488,38 +1738,39 @@ 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>Copy SignUp Link</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()"
+            >
+              <ui-icon name="link" class="text-muted-color"></ui-icon>
+              <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()"
           >
-            <i class="pi pi-sign-out text-muted-color"></i>
-            <span>Logout</span>
+            <ui-icon name="sign-out" class="text-muted-color"></ui-icon>
+            <span>{{ 'layout.profile.logout' | translate }}</span>
           </a>
         </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-profile',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AngularModule, StyleClassModule],
+                    imports: [UiModule, AngularModule, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1527,12 +1778,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       [hideOnOutsideClick]="true"
       (click)="togglePanel()"
     >
-      <i class="pi pi-user"></i>
-      <span>Profile</span>
+      <ui-icon name="user"></ui-icon>
+      <span>{{ 'layout.profile.title' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay)"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-3">
         <!-- User Info -->
@@ -1544,18 +1795,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <img
               [src]="profilePicture()"
               class="w-12 h-12 rounded-border object-cover"
-              alt="Profile"
+              [alt]="'layout.profile.profile.picture.alt' | translate"
             />
           } @else {
             <div
               class="w-12 h-12 rounded-border bg-primary flex items-center justify-center"
             >
-              <i class="pi pi-user text-xl text-primary-contrast"></i>
+              <ui-icon name="user" class="text-xl text-primary-contrast"></ui-icon>
             </div>
           }
           <div class="flex flex-col min-w-0 flex-1">
-            <span class="font-semibold text-color truncate">{{ userName() }}</span>
-            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
+            <span class="font-semibold text-color truncate">{{
+              userName()
+            }}</span>
+            <span class="text-sm text-muted-color truncate">{{
+              userEmail()
+            }}</span>
           </div>
         </a>
 
@@ -1564,19 +1819,21 @@ 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>Copy SignUp Link</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()"
+            >
+              <ui-icon name="link" class="text-muted-color"></ui-icon>
+              <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()"
           >
-            <i class="pi pi-sign-out text-muted-color"></i>
-            <span>Logout</span>
+            <ui-icon name="sign-out" class="text-muted-color"></ui-icon>
+            <span>{{ 'layout.profile.logout' | translate }}</span>
           </a>
         </div>
       </div>
@@ -1585,24 +1842,401 @@ 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('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    suggestionsOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestionsOpen" }] : /* istanbul ignore next */ []));
+    suggestions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    isSearchExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSearchExpanded" }] : /* istanbul ignore next */ []));
+    isResponsive = signal(typeof window !== 'undefined' ? window.innerWidth < 768 : false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResponsive" }] : /* istanbul ignore next */ []));
+    searchWrapper = viewChild('searchWrapper', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchWrapper" }] : /* istanbul ignore next */ []));
+    searchInput = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
+    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() {
+        const query = this.searchTerm();
+        if (this.searchAdapter?.onSearch && query.trim()) {
+            this.searchAdapter.onSearch(query);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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"
+          class="search-toggle-btn layout-topbar-action"
+          (click)="toggleSearch()"
+          [attr.aria-label]="'layout.topbar.search' | translate"
+        >
+          <ui-icon name="search"></ui-icon>
+        </button>
+
+        @if (isSearchExpanded()) {
+          <div class="search-dropdown-panel">
+            <f-iconfield class="search-iconfield">
+              <f-inputicon class="search-icon"><ui-icon name="search" /></f-inputicon>
+              <input
+                type="text"
+                fInputText
+                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"
+              />
+            </f-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) {
+                        <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
+                      }
+                      <span class="suggestion-label">{{ item.label }}</span>
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        }
+      } @else {
+        <!-- Desktop Full Input Mode -->
+        <f-iconfield class="search-iconfield">
+          <f-inputicon class="search-icon cursor-pointer" (click)="onSearch()"><ui-icon name="search" /></f-inputicon>
+          <input
+            type="text"
+            fInputText
+            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
+          />
+        </f-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) {
+                    <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
+                  }
+                  <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(--f-content-border-radius);box-shadow:var(--f-shadow-xl);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(--f-content-border-radius);box-shadow:var(--f-shadow-xl);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(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i1.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSearchbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-searchbar', imports: [UiModule, AngularModule, 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"
+          class="search-toggle-btn layout-topbar-action"
+          (click)="toggleSearch()"
+          [attr.aria-label]="'layout.topbar.search' | translate"
+        >
+          <ui-icon name="search"></ui-icon>
+        </button>
+
+        @if (isSearchExpanded()) {
+          <div class="search-dropdown-panel">
+            <f-iconfield class="search-iconfield">
+              <f-inputicon class="search-icon"><ui-icon name="search" /></f-inputicon>
+              <input
+                type="text"
+                fInputText
+                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"
+              />
+            </f-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) {
+                        <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
+                      }
+                      <span class="suggestion-label">{{ item.label }}</span>
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        }
+      } @else {
+        <!-- Desktop Full Input Mode -->
+        <f-iconfield class="search-iconfield">
+          <f-inputicon class="search-icon cursor-pointer" (click)="onSearch()"><ui-icon name="search" /></f-inputicon>
+          <input
+            type="text"
+            fInputText
+            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
+          />
+        </f-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) {
+                    <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
+                  }
+                  <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(--f-content-border-radius);box-shadow:var(--f-shadow-xl);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(--f-content-border-radius);box-shadow:var(--f-shadow-xl);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(--f-content-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);
     destroyRef = inject(DestroyRef);
     layoutService = inject(LayoutService);
-    configContainer = viewChild('configContainer', ...(ngDevMode ? [{ debugName: "configContainer" }] : []));
-    activePanel = signal(null, ...(ngDevMode ? [{ debugName: "activePanel" }] : []));
+    notificationBellComponent = inject(LAYOUT_NOTIFICATION_BELL, {
+        optional: true,
+    });
+    languageSelectorComponent = inject(LAYOUT_LANGUAGE_SELECTOR, {
+        optional: true,
+    });
+    searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, {
+        optional: true,
+    });
+    hasSearchAdapter = computed(() => !!this.searchAdapter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSearchAdapter" }] : /* istanbul ignore next */ []));
+    configContainer = viewChild('configContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "configContainer" }] : /* istanbul ignore next */ []));
+    navContainer = viewChild('navContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navContainer" }] : /* istanbul ignore next */ []));
+    activePanel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanel" }] : /* istanbul ignore next */ []));
     constructor() {
         fromEvent(this.document, 'click')
             .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.activePanel() !== null))
             .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;
-    enableCompanyFeature = computed(() => {
-        return isCompanyFeatureEnabled(this.appConfig);
-    }, ...(ngDevMode ? [{ debugName: "enableCompanyFeature" }] : []));
+    displayLogo = this.layoutService.displayLogo;
+    enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
     toggleDarkMode() {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
         this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
@@ -1617,38 +2251,90 @@ class AppTopbar {
             this.activePanel.set(null);
         }
     }
-    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"
-        (click)="layoutService.onMenuToggle()"
-      >
-        <i class="pi pi-bars"></i>
-      </button>
+    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: "22.0.6", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+      }
       <a class="layout-topbar-logo" routerLink="/">
-        <span>{{ companyName() }}</span>
+        @if (displayLogo()) {
+          @if (layoutService.isDisplayLogoSvg()) {
+            <inline-svg [src]="displayLogo()" class="logo-image" />
+          } @else {
+            <img
+              [src]="displayLogo()"
+              [alt]="companyName()"
+              class="logo-image"
+            />
+          }
+        }
+        <span class="hidden sm:inline">{{ 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()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </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"
           class="layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
-          <i
-            class="pi"
-            [class.pi-moon]="layoutService.isDarkTheme()"
-            [class.pi-sun]="!layoutService.isDarkTheme()"
-          ></i>
+          <ui-icon [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
         </button>
         <div class="relative" #configContainer>
           <button
             class="layout-topbar-action"
             [class.layout-topbar-action-highlight]="activePanel() === 'config'"
-            pStyleClass="@next"
+            [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
+            fStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
             leaveToClass="hidden"
@@ -1656,7 +2342,7 @@ class AppTopbar {
             [hideOnOutsideClick]="true"
             (click)="togglePanel('config')"
           >
-            <i class="pi pi-palette"></i>
+            <ui-icon name="palette"></ui-icon>
           </button>
           <app-configurator />
         </div>
@@ -1664,14 +2350,15 @@ class AppTopbar {
 
       <button
         class="layout-topbar-menu-button layout-topbar-action"
-        pStyleClass="@next"
+        [attr.aria-label]="'layout.topbar.more.options' | translate"
+        fStyleClass="@next"
         enterFromClass="hidden"
         enterActiveClass="animate-scalein"
         leaveToClass="hidden"
         leaveActiveClass="animate-fadeout"
         [hideOnOutsideClick]="true"
       >
-        <i class="pi pi-ellipsis-v"></i>
+        <ui-icon name="ellipsis-v"></ui-icon>
       </button>
 
       <div class="layout-topbar-menu hidden lg:block">
@@ -1679,59 +2366,105 @@ class AppTopbar {
           @if (layoutService.hasApps()) {
             <app-launcher />
           }
-          @if (enableCompanyFeature()) {
+          @if (languageSelectorComponent) {
+            <ng-container *ngComponentOutlet="languageSelectorComponent" />
+          }
+          @if (enableCompanyFeature) {
             <app-company-branch-selector />
           }
+          @if (notificationBellComponent) {
+            <ng-container *ngComponentOutlet="notificationBellComponent" />
+          }
           <app-profile />
         </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: "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-topbar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        RouterModule,
-                        StyleClassModule,
+                    imports: [UiModule, RouterModule,
+                        NgComponentOutlet,
+                        TranslatePipe,
+                        InlineSvgComponent,
                         AppConfigurator,
+                        AppMenu,
                         AppProfile,
                         AppCompanyBranchSelector,
                         AppLauncher,
-                    ],
-                    template: ` <div class="layout-topbar">
-    <div class="layout-topbar-logo-container">
-      <button
-        class="layout-menu-button layout-topbar-action"
-        (click)="layoutService.onMenuToggle()"
-      >
-        <i class="pi pi-bars"></i>
-      </button>
+                        AppSearchbar,],
+                    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()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+      }
       <a class="layout-topbar-logo" routerLink="/">
-        <span>{{ companyName() }}</span>
+        @if (displayLogo()) {
+          @if (layoutService.isDisplayLogoSvg()) {
+            <inline-svg [src]="displayLogo()" class="logo-image" />
+          } @else {
+            <img
+              [src]="displayLogo()"
+              [alt]="companyName()"
+              class="logo-image"
+            />
+          }
+        }
+        <span class="hidden sm:inline">{{ 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()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </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"
           class="layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
-          <i
-            class="pi"
-            [class.pi-moon]="layoutService.isDarkTheme()"
-            [class.pi-sun]="!layoutService.isDarkTheme()"
-          ></i>
+          <ui-icon [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
         </button>
         <div class="relative" #configContainer>
           <button
             class="layout-topbar-action"
             [class.layout-topbar-action-highlight]="activePanel() === 'config'"
-            pStyleClass="@next"
+            [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
+            fStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
             leaveToClass="hidden"
@@ -1739,7 +2472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             [hideOnOutsideClick]="true"
             (click)="togglePanel('config')"
           >
-            <i class="pi pi-palette"></i>
+            <ui-icon name="palette"></ui-icon>
           </button>
           <app-configurator />
         </div>
@@ -1747,14 +2480,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
       <button
         class="layout-topbar-menu-button layout-topbar-action"
-        pStyleClass="@next"
+        [attr.aria-label]="'layout.topbar.more.options' | translate"
+        fStyleClass="@next"
         enterFromClass="hidden"
         enterActiveClass="animate-scalein"
         leaveToClass="hidden"
         leaveActiveClass="animate-fadeout"
         [hideOnOutsideClick]="true"
       >
-        <i class="pi pi-ellipsis-v"></i>
+        <ui-icon name="ellipsis-v"></ui-icon>
       </button>
 
       <div class="layout-topbar-menu hidden lg:block">
@@ -1762,294 +2496,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           @if (layoutService.hasApps()) {
             <app-launcher />
           }
-          @if (enableCompanyFeature()) {
+          @if (languageSelectorComponent) {
+            <ng-container *ngComponentOutlet="languageSelectorComponent" />
+          }
+          @if (enableCompanyFeature) {
             <app-company-branch-selector />
           }
+          @if (notificationBellComponent) {
+            <ng-container *ngComponentOutlet="notificationBellComponent" />
+          }
           <app-profile />
         </div>
       </div>
     </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().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().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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, decorators: [{
-            type: Component,
-            args: [{ selector: '[app-menuitem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], 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().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().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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-menu',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
     <div class="layout-sidebar">
       <app-menu />
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sidebar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenu],
                     template: `
     <div class="layout-sidebar">
@@ -2088,11 +2563,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({
@@ -2112,20 +2590,32 @@ class AppLayout {
     unblockBodyScroll() {
         this.document.body.classList.remove('blocked-scroll');
     }
-    containerClass = computed(() => {
-        const config = this.layoutService.layoutConfig();
-        const state = this.layoutService.layoutState();
-        return {
-            'layout-overlay': config.menuMode === 'overlay',
-            'layout-static': config.menuMode === 'static',
-            'layout-static-inactive': state.staticMenuDesktopInactive && config.menuMode === 'static',
-            'layout-overlay-active': state.overlayMenuActive,
-            'layout-mobile-active': state.staticMenuMobileActive,
-        };
-    }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
-    <div class="layout-wrapper" [ngClass]="containerClass()">
+    isOverlay = computed(() => this.layoutService.layoutConfig().menuMode === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+    isStatic = computed(() => this.layoutService.layoutConfig().menuMode === 'static', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStatic" }] : /* istanbul ignore next */ []));
+    isTopbarMode = computed(() => this.layoutService.layoutConfig().menuMode === 'topbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTopbarMode" }] : /* istanbul ignore next */ []));
+    isStaticInactive = computed(() => this.layoutService.layoutState().staticMenuDesktopInactive && this.isStatic(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStaticInactive" }] : /* istanbul ignore next */ []));
+    isOverlayActive = computed(() => this.layoutService.layoutState().overlayMenuActive, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlayActive" }] : /* istanbul ignore next */ []));
+    isMobileActive = computed(() => this.layoutService.layoutState().staticMenuMobileActive, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobileActive" }] : /* istanbul ignore next */ []));
+    isTopbarNavHidden = computed(() => !this.layoutService.layoutState().topbarMenuVisible && this.isTopbarMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTopbarNavHidden" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    <div
+      class="layout-wrapper"
+      [class.layout-overlay]="isOverlay()"
+      [class.layout-static]="isStatic()"
+      [class.layout-topbar-mode]="isTopbarMode()"
+      [class.layout-static-inactive]="isStaticInactive()"
+      [class.layout-overlay-active]="isOverlayActive()"
+      [class.layout-mobile-active]="isMobileActive()"
+      [class.layout-topbar-nav-hidden]="isTopbarNavHidden()"
+    >
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2136,16 +2626,24 @@ class AppLayout {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
+                    imports: [AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
-    <div class="layout-wrapper" [ngClass]="containerClass()">
+    <div
+      class="layout-wrapper"
+      [class.layout-overlay]="isOverlay()"
+      [class.layout-static]="isStatic()"
+      [class.layout-topbar-mode]="isTopbarMode()"
+      [class.layout-static-inactive]="isStaticInactive()"
+      [class.layout-overlay-active]="isOverlayActive()"
+      [class.layout-mobile-active]="isMobileActive()"
+      [class.layout-topbar-nav-hidden]="isTopbarNavHidden()"
+    >
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2160,47 +2658,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const NavyBlueTheme = definePreset(Material, {
-    semantic: {
-        colorScheme: {
-            light: {
-                primary: {
-                    color: '#3535cd',
-                    inverseColor: '#0707a9',
-                    hoverColor: '#0707a9',
-                    activeColor: '#0707a9',
-                },
-                highlight: {
-                    background: '#e2e8f0',
-                    focusBackground: '#e2e8f0',
-                    color: '#3535cd',
-                    focusColor: '#3535cd',
-                },
-            },
-        },
-    },
-});
+function buildPreset(presetName, primary) {
+    return { preset: presetName, primary };
+}
 
-const GreenTheme = definePreset(Material, {
-    semantic: {
-        colorScheme: {
-            light: {
-                primary: {
-                    color: '#01712c',
-                    inverseColor: '#119744',
-                    hoverColor: '#119744',
-                    activeColor: '#119744',
-                },
-                highlight: {
-                    background: '#e2e8f0',
-                    focusBackground: '#e2e8f0',
-                    color: '#01712c',
-                    focusColor: '#01712c',
-                },
-            },
-        },
-    },
-});
+const NavyBlueTheme = {
+    preset: 'Aura',
+    primary: 'indigo',
+};
+
+const GreenTheme = {
+    preset: 'Aura',
+    primary: 'green',
+};
+
+const LAYOUT_MESSAGES = {
+    // components/top-bar/app.profile.ts
+    'layout.profile.title': 'Profile',
+    'layout.profile.profile.picture.alt': 'Profile picture',
+    'layout.profile.copy.sign.up.link': 'Copy SignUp Link',
+    'layout.profile.logout': 'Logout',
+    'layout.profile.guest': 'Guest',
+    'layout.profile.link.copied': 'Link Copied',
+    'layout.profile.sign.up.link.copied': 'Sign Up Link copied.',
+    'layout.profile.failed.copy.sign.up.link': 'Failed to copy signup link.',
+    // components/top-bar/app.launcher.ts
+    'layout.launcher.apps': 'Apps',
+    'layout.launcher.applications': 'Applications',
+    // components/top-bar/app.company-branch-selector.ts
+    'layout.company.branch.selector.title': 'Switch Company & Branch',
+    'layout.company.branch.selector.select.company': 'Select Company',
+    'layout.company.branch.selector.branch': 'Branch',
+    'layout.company.branch.selector.select.branch': 'Select Branch',
+    'layout.company.branch.selector.switch.button': 'Switch',
+    'layout.company.branch.selector.no.company': 'No Company',
+    'layout.company.branch.selector.branch.required': 'Branch Required',
+    'layout.company.branch.selector.please.select.branch': 'Please select a branch',
+    // components/top-bar/app.searchbar.ts
+    'layout.topbar.search': 'Search',
+    'layout.topbar.search.placeholder': 'Search for content...',
+    // components/app.topbar.ts
+    'layout.topbar.toggle.menu': 'Toggle menu',
+    'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
+    'layout.topbar.open.theme.settings': 'Open theme settings',
+    'layout.topbar.more.options': 'More options',
+    // components/app.configurator.ts
+    'layout.configurator.primary': 'Primary',
+    'layout.configurator.surface': 'Surface',
+    'layout.configurator.presets': 'Presets',
+    'layout.configurator.menu.mode': 'Menu Mode',
+    'layout.configurator.menu.mode.static': 'Static',
+    'layout.configurator.menu.mode.overlay': 'Overlay',
+    'layout.configurator.menu.mode.topbar': 'Topbar',
+    // components/app.footer.ts
+    'layout.footer.by': 'by',
+    // app-menu.config.ts (main app menu configuration)
+    'menu.dashboard': 'Dashboard',
+    'menu.administration': 'Administration',
+    'menu.iam': 'IAM',
+    'menu.storage': 'Storage',
+    'menu.forms': 'Forms',
+    'menu.email': 'Email',
+    'menu.event.manager': 'Event Manager',
+    'menu.task.manager': 'Task Manager',
+    'menu.notifications': 'Notifications',
+    'menu.localization': 'Localization',
+    'menu.components': 'Components',
+    'menu.components.display': 'Display',
+    'menu.components.menu': 'Menu',
+    'menu.components.form': 'Form',
+    'menu.components.overlay': 'Overlay',
+    'menu.components.data': 'Data',
+    'menu.components.panel': 'Panel',
+    'menu.components.media': 'Media',
+    'menu.components.misc': 'Directives',
+    'menu.projects': 'Projects',
+    'menu.projects.active': 'Active Projects',
+    'menu.projects.archived': 'Archived',
+    'menu.projects.reports': 'Reports',
+    // Those are layout part from notification module, but we put them here to avoid circular dependency between layout and notification module
+    // components/notification-bell/notification-bell.component.ts
+    'notification.title': 'Notifications',
+    // components/notification-list/notification-list.component.ts
+    'notification.mark.all.read': 'Mark all read',
+    'notification.view.all': 'View all notifications',
+    'notification.empty': 'No notifications',
+    // components/notification-item/notification-item.component.ts
+    'notification.time.just.now': 'Just now',
+    'notification.time.minutes.ago': '{{count}}m ago',
+    'notification.time.hours.ago': '{{count}}h ago',
+    'notification.time.days.ago': '{{count}}d ago',
+};
 
 // Components
 
@@ -2208,5 +2756,5 @@ const GreenTheme = definePreset(Material, {
  * 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, 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, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
 //# sourceMappingURL=flusys-ng-layout.mjs.map