@sdcorejs/angular 21.1.3 → 21.1.5

package/fesm2022/sdcorejs-angular-modules-layout.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, effect, Component, Injectable, InjectionToken, signal, Pipe, output, DestroyRef, computed, untracked, viewChild, NgModule } from '@angular/core';
-import * as i1$3 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import * as i1$5 from '@angular/router';
+import { inject, ElementRef, input, booleanAttribute, effect, Component, Injectable, InjectionToken, signal, computed, Pipe, DestroyRef, viewChild, output, isSignal, ChangeDetectionStrategy, untracked, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i1$3 from '@angular/router';
 import { Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
 import { __decorate } from 'tslib';
 import { SdAvatar, SdTabComponent, SdButton } from '@sdcorejs/angular/components';
 import { I18nService, TranslatePipe, I18N_STORAGE_KEY, I18N_MESSAGES } from '@sdcorejs/angular/i18n';
-import * as i1 from '@sdcorejs/angular/services';
+import { SdStorageService } from '@sdcorejs/angular/services';
+import { StringUtilities, Utilities } from '@sdcorejs/utils/fns';
+import { SD_VIEWPORT, SdViewportService } from '@sdcorejs/angular/services/viewport';
 import { resolveMaybeAsync } from '@sdcorejs/utils/models';
-import { Utilities, StringUtilities, BrowserUtilities } from '@sdcorejs/utils/fns';
-import * as i1$1 from '@sdcorejs/angular/modules/permission';
-import * as i1$4 from '@angular/material/sidenav';
+import { SdPermissionService } from '@sdcorejs/angular/modules/permission';
+import * as i1$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -19,15 +20,14 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/tree';
+import * as i2 from '@angular/material/tree';
 import { MatTreeNestedDataSource, MatTreeModule } from '@angular/material/tree';
 import { SdInput, SdSuffixDefDirective } from '@sdcorejs/angular/forms';
 import { SdSafeHtmlPipe } from '@sdcorejs/angular/pipes';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1$2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
+import { isObservable } from 'rxjs';
+import * as i1$2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 
 class SdPageComponent {
     el = inject(ElementRef);
@@ -49,24 +49,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'sd-page', template: "@if (!noHeader()) {\n  <div class=\"c-page-header bg-white\">\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\n      <div class=\"d-flex\">\n        <ng-content select=\"[headerLeft]\">\n          <div class=\"d-flex flex-column\">\n            <div class=\"T20M\">{{ title() }}</div>\n            @if (description()) {\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <ng-content select=\"[headerRight]\"></ng-content>\n    </div>\n  </div>\n}\n\n<div class=\"c-page-wrapper px-0\">\n  <div class=\"c-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], noHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "noHeader", required: false }] }] } });
 
+function getMenuStableKey(menu, ancestors = []) {
+    if (!menu || typeof menu !== 'object')
+        return '';
+    if (typeof menu.id === 'string' && menu.id.trim())
+        return `id:${menu.id.trim()}`;
+    if ('path' in menu && typeof menu.path === 'string' && menu.path.trim())
+        return `path:${menu.path.trim()}`;
+    const title = typeof menu.title === 'string' ? menu.title.trim() : '';
+    const segments = [...ancestors, title]
+        .map(segment => StringUtilities.changeAliasLowerCase(segment).trim().replace(/\s+/g, '-'))
+        .filter(Boolean);
+    return segments.length ? `group:${segments.join('/')}` : '';
+}
+function searchMenuLeaves(menus, query) {
+    const leaves = flattenMenuLeaves(menus);
+    const normalizedQuery = query?.trim();
+    if (!normalizedQuery)
+        return leaves;
+    return leaves.filter(menu => [menu.title, menu.tooltipTitle].some(value => value && StringUtilities.aliasIncludes(value, normalizedQuery)));
+}
+function selectPrimaryMenuGroups(menus, requestedIds, maximum = 3) {
+    const limit = Number.isFinite(maximum) && maximum > 0 ? Math.min(3, Math.floor(maximum)) : 3;
+    const byId = new Map(menus.filter(menu => typeof menu.id === 'string').map(menu => [menu.id, menu]));
+    const selected = [];
+    const selectedKeys = new Set();
+    for (const id of requestedIds ?? []) {
+        const menu = byId.get(id);
+        const key = getMenuStableKey(menu);
+        if (!menu || !key || selectedKeys.has(key))
+            continue;
+        selected.push(menu);
+        selectedKeys.add(key);
+        if (selected.length === limit)
+            return selected;
+    }
+    for (const menu of menus) {
+        const key = getMenuStableKey(menu);
+        if (!key || selectedKeys.has(key))
+            continue;
+        selected.push(menu);
+        selectedKeys.add(key);
+        if (selected.length === limit)
+            break;
+    }
+    return selected;
+}
+function resolveMenuKeys(menus, keys) {
+    const menuByKey = new Map();
+    visitMenus(menus, [], (menu, ancestors) => {
+        const key = getMenuStableKey(menu, ancestors);
+        if (key && !menuByKey.has(key))
+            menuByKey.set(key, menu);
+    });
+    return [...new Set(keys)].map(key => menuByKey.get(key)).filter((menu) => !!menu);
+}
+function flattenMenuLeaves(menus) {
+    const leaves = [];
+    visitMenus(menus, [], menu => {
+        if ('path' in menu && typeof menu.path === 'string' && menu.path)
+            leaves.push(menu);
+    });
+    return leaves;
+}
+function visitMenus(menus, ancestors, visitor) {
+    for (const menu of menus ?? []) {
+        if (!menu || typeof menu !== 'object')
+            continue;
+        visitor(menu, ancestors);
+        if ('children' in menu && Array.isArray(menu.children)) {
+            const title = typeof menu.title === 'string' && menu.title.trim() ? menu.title.trim() : getMenuStableKey(menu, ancestors);
+            visitMenus(menu.children, title ? [...ancestors, title] : ancestors, visitor);
+        }
+    }
+}
+
 class SdLayoutStorageService {
-    sdStorageService;
-    // Thông tin state của sidebar
-    isShowSidebar;
-    menuLockStatus;
-    lastActiveMenuGroupId;
-    pinnedMenuGroup;
-    // End
-    constructor(sdStorageService) {
-        this.sdStorageService = sdStorageService;
-        // State sidebar
-        this.isShowSidebar = this.sdStorageService.create('cb07c316-ed6d-4620-9e92-53dbef6aa983');
-        this.menuLockStatus = this.sdStorageService.create('2c2f4816-18b3-4ec3-8177-7b90bff036c3');
-        this.lastActiveMenuGroupId = this.sdStorageService.create('2e6961d0-3380-4a94-a6a1-38837560cd96');
-        this.pinnedMenuGroup = this.sdStorageService.create('e81da122-5dab-4250-b309-64197fb19d44');
-        // End
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutStorageService, deps: [{ token: i1.SdStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    #sdStorageService = inject(SdStorageService);
+    isShowSidebar = this.#sdStorageService.create('cb07c316-ed6d-4620-9e92-53dbef6aa983');
+    menuLockStatus = this.#sdStorageService.create('2c2f4816-18b3-4ec3-8177-7b90bff036c3');
+    lastActiveMenuGroupId = this.#sdStorageService.create('2e6961d0-3380-4a94-a6a1-38837560cd96');
+    pinnedMenuGroup = this.#sdStorageService.create('e81da122-5dab-4250-b309-64197fb19d44');
+    pinnedMenuKeys = this.#sdStorageService.create('4bdc7f80-9ff4-4fe0-908f-6c9f7fe4100a');
+    recentMenuKeys = this.#sdStorageService.create('fb989dc1-f6e7-4b62-a611-861a8f214a51');
+    versionStates = this.#sdStorageService.create('ca8e4261-fbd4-4209-af88-2dbe278c1a1b');
+    readPinnedMenuKeys(menus) {
+        const storedKeys = this.pinnedMenuKeys.has() ? this.pinnedMenuKeys.get() : this.#getLegacyPinnedKeys();
+        const validKeys = this.#resolveValidKeys(menus, storedKeys ?? []);
+        if (!this.pinnedMenuKeys.has() || !this.#sameKeys(storedKeys ?? [], validKeys)) {
+            this.pinnedMenuKeys.set(validKeys);
+        }
+        return validKeys;
+    }
+    writePinnedMenuKeys(keys) {
+        this.pinnedMenuKeys.set([...new Set(keys.filter(Boolean))]);
+    }
+    readRecentMenuKeys(menus, maximum = 5) {
+        const storedKeys = this.recentMenuKeys.get() ?? [];
+        const limit = Number.isFinite(maximum) && maximum > 0 ? Math.floor(maximum) : 5;
+        const validKeys = this.#resolveValidKeys(menus, storedKeys).slice(0, limit);
+        if (!this.#sameKeys(storedKeys, validKeys))
+            this.recentMenuKeys.set(validKeys);
+        return validKeys;
+    }
+    writeRecentMenuKeys(keys) {
+        this.recentMenuKeys.set([...new Set(keys.filter(Boolean))]);
+    }
+    readVersionState(version) {
+        return this.versionStates.get()?.[String(version)] ?? {};
+    }
+    patchVersionState(version, patch) {
+        const states = this.versionStates.get() ?? {};
+        const nextState = { ...(states[String(version)] ?? {}), ...patch };
+        this.versionStates.set({ ...states, [String(version)]: nextState });
+        return nextState;
+    }
+    #getLegacyPinnedKeys() {
+        const legacyGroup = this.pinnedMenuGroup.get();
+        if (!legacyGroup || !Array.isArray(legacyGroup.children))
+            return [];
+        return legacyGroup.children.map(menu => getMenuStableKey(menu)).filter(Boolean);
+    }
+    #resolveValidKeys(menus, keys) {
+        return resolveMenuKeys(menus, keys)
+            .map(menu => getMenuStableKey(menu))
+            .filter(Boolean);
+    }
+    #sameKeys(left, right) {
+        return left.length === right.length && left.every((key, index) => key === right[index]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutStorageService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutStorageService, decorators: [{
@@ -74,10 +186,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.SdStorageService }] });
+        }] });
 
+const DEFAULT_LAYOUT_MOBILE_BREAKPOINT = 1024;
+function normalizeLayoutMobileBreakpoint(value) {
+    if (!Number.isFinite(value) || Number(value) <= 0) {
+        return DEFAULT_LAYOUT_MOBILE_BREAKPOINT;
+    }
+    return Math.floor(Number(value));
+}
+function resolveSidebarV2Interaction(sidebar) {
+    return sidebar.interaction === 'hover-lock' ? 'hover-lock' : 'click';
+}
+function resolveSidebarV3Recent(sidebar) {
+    const configuredLimit = sidebar.recent?.maxItems;
+    const maxItems = Number.isFinite(configuredLimit) && Number(configuredLimit) > 0 ? Math.floor(Number(configuredLimit)) : 5;
+    return {
+        enabled: sidebar.recent?.enabled ?? true,
+        maxItems,
+    };
+}
+function normalizeSidebarConfiguration(sidebar) {
+    if (sidebar.version === 2) {
+        return {
+            ...sidebar,
+            interaction: resolveSidebarV2Interaction(sidebar),
+            primaryMenuIds: [...new Set((sidebar.primaryMenuIds ?? []).filter(id => typeof id === 'string' && id.trim()))].slice(0, 3),
+        };
+    }
+    if (sidebar.version === 3) {
+        return {
+            ...sidebar,
+            defaultCollapsed: sidebar.defaultCollapsed ?? false,
+            recent: resolveSidebarV3Recent(sidebar),
+        };
+    }
+    return sidebar;
+}
 const SD_LAYOUT_CONFIGURATION = new InjectionToken('sd.layout.configuration');
 
+const SD_LAYOUT_VIEWPORT = SD_VIEWPORT;
+/** @deprecated Prefer `SdViewportService` from `@sdcorejs/angular/services/viewport`. */
+class SdLayoutResponsiveService {
+    #viewport = inject(SdViewportService);
+    viewportWidth = this.#viewport.width;
+    isMobile(breakpoint) {
+        return this.viewportWidth() < normalizeLayoutMobileBreakpoint(breakpoint);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutResponsiveService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutResponsiveService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SdLayoutNavigationStateService {
+    #storage = inject(SdLayoutStorageService);
+    #menus = signal([], ...(ngDevMode ? [{ debugName: "#menus" }] : /* istanbul ignore next */ []));
+    pinnedKeys = signal([], ...(ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []));
+    recentKeys = signal([], ...(ngDevMode ? [{ debugName: "recentKeys" }] : /* istanbul ignore next */ []));
+    pinnedMenus = computed(() => resolveMenuKeys(this.#menus(), this.pinnedKeys()), ...(ngDevMode ? [{ debugName: "pinnedMenus" }] : /* istanbul ignore next */ []));
+    recentMenus = computed(() => resolveMenuKeys(this.#menus(), this.recentKeys()), ...(ngDevMode ? [{ debugName: "recentMenus" }] : /* istanbul ignore next */ []));
+    hydrate(menus, recentMaximum = 5) {
+        this.#menus.set(menus);
+        this.pinnedKeys.set(this.#storage.readPinnedMenuKeys(menus));
+        this.recentKeys.set(this.#storage.readRecentMenuKeys(menus, recentMaximum));
+    }
+    togglePinned(menu) {
+        const key = getMenuStableKey(menu);
+        if (!key)
+            return;
+        const nextKeys = this.pinnedKeys().includes(key)
+            ? this.pinnedKeys().filter(currentKey => currentKey !== key)
+            : [...this.pinnedKeys(), key];
+        this.pinnedKeys.set(nextKeys);
+        this.#storage.writePinnedMenuKeys(nextKeys);
+    }
+    recordRecent(menu, configuration) {
+        if (!configuration.enabled)
+            return;
+        const key = getMenuStableKey(menu);
+        if (!key)
+            return;
+        const maximum = Number.isFinite(configuration.maxItems) && configuration.maxItems > 0 ? Math.floor(configuration.maxItems) : 5;
+        const nextKeys = [key, ...this.recentKeys().filter(currentKey => currentKey !== key)].slice(0, maximum);
+        this.recentKeys.set(nextKeys);
+        this.#storage.writeRecentMenuKeys(nextKeys);
+    }
+    patchVersionState(version, patch) {
+        this.#storage.patchVersionState(version, patch);
+    }
+    versionState(version) {
+        return this.#storage.readVersionState(version);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutNavigationStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutNavigationStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutNavigationStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class SdLayoutService {
     // ==========================================
     // INJECT CONFIGURATIONS
@@ -154,10 +364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 // End
 class MenuPipe {
-    permissionService;
-    constructor(permissionService) {
-        this.permissionService = permissionService;
-    }
+    permissionService = inject(SdPermissionService);
+    constructor() { }
     transform(menus) {
         const results = [];
         const check = (menu) => {
@@ -221,6 +429,9 @@ class MenuPipe {
         return results;
     }
     #getHashIdMenu = (menu) => {
+        const explicitId = typeof menu.id === 'string' ? menu.id.trim() : '';
+        if (explicitId)
+            return explicitId;
         const extendedMenu = menu;
         const hashKeys = [
             'title',
@@ -241,7 +452,7 @@ class MenuPipe {
         }, {});
         return Object.keys(hashData).length > 0 ? Utilities.hash(hashData) : Utilities.generateUuid();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuPipe, deps: [{ token: i1$1.SdPermissionService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: MenuPipe, isStandalone: true, name: "menu" });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuPipe, providedIn: 'root' });
 }
@@ -255,7 +466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.SdPermissionService }] });
+        }], ctorParameters: () => [] });
 
 // End
 class MenuFocusPipe {
@@ -335,53 +546,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+class SdLayoutUserMenuComponent {
+    #configuration = inject(SD_LAYOUT_CONFIGURATION, { optional: true });
+    #destroyRef = inject(DestroyRef);
+    #document = inject(DOCUMENT);
+    #host = inject(ElementRef);
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
+    signout = input(...(ngDevMode ? [undefined, { debugName: "signout" }] : /* istanbul ignore next */ []));
+    changePassword = input(...(ngDevMode ? [undefined, { debugName: "changePassword" }] : /* istanbul ignore next */ []));
+    updateProfile = input(...(ngDevMode ? [undefined, { debugName: "updateProfile" }] : /* istanbul ignore next */ []));
+    setting = input(...(ngDevMode ? [undefined, { debugName: "setting" }] : /* istanbul ignore next */ []));
+    notification = input(...(ngDevMode ? [undefined, { debugName: "notification" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    presentation = input('disclosure', ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    #observableNotificationCount = signal(undefined, ...(ngDevMode ? [{ debugName: "#observableNotificationCount" }] : /* istanbul ignore next */ []));
+    avatar = computed(() => {
+        const user = this.userInfo();
+        return user.avatar || user.fullName || user.username || user.email;
+    }, ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
+    displayName = computed(() => this.userInfo().fullName || this.userInfo().username || this.userInfo().email || 'User', ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        const role = this.userInfo().role;
+        const text = role?.text?.trim();
+        return text ? { ...role, text } : undefined;
+    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    signoutAction = computed(() => this.signout() ?? this.#configuration?.signout, ...(ngDevMode ? [{ debugName: "signoutAction" }] : /* istanbul ignore next */ []));
+    changePasswordAction = computed(() => this.changePassword() ?? this.#configuration?.changePassword, ...(ngDevMode ? [{ debugName: "changePasswordAction" }] : /* istanbul ignore next */ []));
+    updateProfileAction = computed(() => this.updateProfile() ?? this.#configuration?.updateProfile, ...(ngDevMode ? [{ debugName: "updateProfileAction" }] : /* istanbul ignore next */ []));
+    settingAction = computed(() => this.setting() ?? this.#configuration?.setting, ...(ngDevMode ? [{ debugName: "settingAction" }] : /* istanbul ignore next */ []));
+    notificationConfiguration = computed(() => this.notification() ?? this.#configuration?.notification, ...(ngDevMode ? [{ debugName: "notificationConfiguration" }] : /* istanbul ignore next */ []));
+    notificationAction = computed(() => this.notificationConfiguration()?.action, ...(ngDevMode ? [{ debugName: "notificationAction" }] : /* istanbul ignore next */ []));
+    notificationCount = computed(() => {
+        const source = this.notificationConfiguration()?.count;
+        const value = isSignal(source) ? source() : isObservable(source) ? this.#observableNotificationCount() : source;
+        return this.#normalizeNotificationCount(value);
+    }, ...(ngDevMode ? [{ debugName: "notificationCount" }] : /* istanbul ignore next */ []));
+    notificationBadge = computed(() => {
+        const count = this.notificationCount();
+        return count > 99 ? '99+' : count > 0 ? String(count) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "notificationBadge" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Observable sources may change with component inputs; effect cleanup guarantees one active subscription.
+        effect(onCleanup => {
+            const source = this.notificationConfiguration()?.count;
+            this.#observableNotificationCount.set(undefined);
+            if (!isObservable(source))
+                return;
+            const subscription = source.subscribe(value => this.#observableNotificationCount.set(value));
+            onCleanup(() => subscription.unsubscribe());
+        });
+        effect(() => {
+            if (!this.isOpen())
+                return;
+            this.menu()?.nativeElement.querySelector('[role="menuitem"]')?.focus();
+        });
+        const onDocumentKeydown = (event) => {
+            if (!this.isOpen() || event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            this.close();
+        };
+        const onDocumentPointerDown = (event) => {
+            if (!this.isOpen())
+                return;
+            const nodeConstructor = this.#document.defaultView?.Node;
+            if (!nodeConstructor || !(event.target instanceof nodeConstructor) || this.#host.nativeElement.contains(event.target))
+                return;
+            this.close(false);
+        };
+        this.#document.addEventListener('keydown', onDocumentKeydown);
+        this.#document.addEventListener('pointerdown', onDocumentPointerDown);
+        this.#destroyRef.onDestroy(() => {
+            this.#document.removeEventListener('keydown', onDocumentKeydown);
+            this.#document.removeEventListener('pointerdown', onDocumentPointerDown);
+        });
+    }
+    open() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close(false);
+        else
+            this.open();
+    }
+    close(restoreFocus = true) {
+        const wasOpen = this.isOpen();
+        this.isOpen.set(false);
+        if (wasOpen)
+            this.closed.emit();
+        if (restoreFocus)
+            this.trigger()?.nativeElement.focus();
+    }
+    onMenuKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || !(event.currentTarget instanceof HTMLElement))
+            return;
+        const actions = [...event.currentTarget.querySelectorAll('[role="menuitem"]')];
+        if (!actions.length)
+            return;
+        event.preventDefault();
+        const currentIndex = actions.findIndex(action => action === this.#document.activeElement);
+        const nextIndex = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? actions.length - 1
+                : event.key === 'ArrowDown'
+                    ? (currentIndex + 1) % actions.length
+                    : (currentIndex - 1 + actions.length) % actions.length;
+        actions[nextIndex].focus();
+    }
+    runChangePassword() {
+        this.#runAction(this.changePasswordAction());
+    }
+    runSignout() {
+        this.#runAction(this.signoutAction());
+    }
+    runUpdateProfile() {
+        this.#runAction(this.updateProfileAction());
+    }
+    runSetting() {
+        this.#runAction(this.settingAction());
+    }
+    runNotification() {
+        this.#runAction(this.notificationAction());
+    }
+    #runAction(action) {
+        action?.();
+        this.close();
+    }
+    #normalizeNotificationCount(value) {
+        return Number.isFinite(value) && Number(value) > 0 ? Math.floor(Number(value)) : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutUserMenuComponent, isStandalone: true, selector: "sd-layout-user-menu", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, signout: { classPropertyName: "signout", publicName: "signout", isSignal: true, isRequired: false, transformFunction: null }, changePassword: { classPropertyName: "changePassword", publicName: "changePassword", isSignal: true, isRequired: false, transformFunction: null }, updateProfile: { classPropertyName: "updateProfile", publicName: "updateProfile", isSignal: true, isRequired: false, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: false, transformFunction: null }, notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _presentation = presentation();\n@let _role = role();\n@let _notificationBadge = notificationBadge();\n<div class=\"sd-layout-user-menu position-relative\">\n  @if (_presentation !== 'disclosure') {\n    <div class=\"sd-layout-user-menu__mobile d-flex flex-column gap-8\">\n      <div\n        data-mobile-account-row\n        class=\"sd-layout-user-menu__mobile-row sd-layout-user-menu__mobile--inline d-flex align-items-center gap-8\">\n        <div data-user-summary class=\"sd-layout-user-menu__summary d-flex align-items-center gap-8 flex-1\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action sd-layout-user-menu__signout d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n\n      @if (updateProfileAction() || settingAction() || notificationAction() || changePasswordAction()) {\n        <div data-mobile-account-actions class=\"sd-layout-user-menu__mobile-actions d-flex flex-column gap-4\">\n          @if (updateProfileAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"update-profile\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runUpdateProfile()\">\n              <sd-icon name=\"edit\"></sd-icon>\n              {{ 'core.module.layout.user.update-profile' | translate }}\n            </button>\n          }\n          @if (settingAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"setting\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runSetting()\">\n              <sd-icon name=\"settings\"></sd-icon>\n              {{ 'core.module.layout.user.setting' | translate }}\n            </button>\n          }\n          @if (notificationAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"notification\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runNotification()\">\n              <sd-icon name=\"notifications\"></sd-icon>\n              <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n              @if (_notificationBadge) {\n                <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n              }\n            </button>\n          }\n          @if (changePasswordAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"change-password\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runChangePassword()\">\n              <sd-icon name=\"lock\"></sd-icon>\n              {{ 'core.module.layout.user.change-password' | translate }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <button\n      #trigger\n      type=\"button\"\n      data-user-trigger\n      class=\"sd-layout-user-menu__trigger d-flex align-items-center text-left\"\n      [class.sd-layout-user-menu__trigger--compact]=\"compact()\"\n      [class.w-full]=\"!compact()\"\n      [class.gap-8]=\"!compact()\"\n      [class.w-56]=\"compact()\"\n      [class.gap-0]=\"compact()\"\n      aria-haspopup=\"menu\"\n      [attr.aria-label]=\"compact() ? displayName() : null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      (click)=\"toggle()\">\n      <sd-avatar [src]=\"avatar()\" [size]=\"compact() ? 32 : 40\"></sd-avatar>\n      @if (!compact()) {\n        <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n          <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n          @if (userInfo().email) {\n            <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n          }\n        </span>\n        <sd-icon [name]=\"isOpen() ? 'expand_less' : 'expand_more'\"></sd-icon>\n      }\n    </button>\n\n    @if (isOpen()) {\n      <div\n        #menu\n        data-user-menu\n        class=\"sd-layout-user-menu__popup d-flex flex-column gap-4 p-8 bg-white border border-black200 rounded-8 mat-elevation-z4\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        (keydown)=\"onMenuKeydown($event)\">\n        <div data-user-identity class=\"sd-layout-user-menu__identity d-flex align-items-center gap-8 px-8 py-4\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (updateProfileAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"update-profile\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runUpdateProfile()\">\n            <sd-icon name=\"edit\"></sd-icon>\n            {{ 'core.module.layout.user.update-profile' | translate }}\n          </button>\n        }\n        @if (settingAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"setting\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runSetting()\">\n            <sd-icon name=\"settings\"></sd-icon>\n            {{ 'core.module.layout.user.setting' | translate }}\n          </button>\n        }\n        @if (notificationAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"notification\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runNotification()\">\n            <sd-icon name=\"notifications\"></sd-icon>\n            <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n            @if (_notificationBadge) {\n              <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n            }\n          </button>\n        }\n        @if (changePasswordAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"change-password\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runChangePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            {{ 'core.module.layout.user.change-password' | translate }}\n          </button>\n        }\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".sd-layout-user-menu__trigger,.sd-layout-user-menu__action{border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-user-menu__trigger:hover,.sd-layout-user-menu__action:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3))}.sd-layout-user-menu__trigger:focus-visible,.sd-layout-user-menu__action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-user-menu__trigger--compact{width:56px;min-height:52px;justify-content:center;gap:0;padding:0}.sd-layout-user-menu__popup{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);width:272px}.sd-layout-user-menu__popup .sd-layout-user-menu__action,.sd-layout-user-menu__mobile-actions .sd-layout-user-menu__action{width:100%}.sd-layout-user-menu__summary{min-width:0;padding:0 8px}.sd-layout-user-menu__identity{min-width:0}.sd-layout-user-menu__signout{width:auto;flex:0 0 auto;min-height:40px;white-space:nowrap}.sd-layout-user-menu__role sd-icon{width:14px;height:14px;font-size:14px;flex:0 0 auto}.sd-layout-user-menu__badge{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--sd-error, #ba1a1a);color:var(--sd-white, #ffffff);font-size:11px;line-height:18px;text-align:center}.sd-layout-user-menu__signout:hover{background:var(--sd-error-light, #ffdad6);color:var(--sd-error-dark, var(--sd-error, #ba1a1a))}@media(prefers-reduced-motion:reduce){.sd-layout-user-menu__trigger,.sd-layout-user-menu__action{transition:none}}\n"], dependencies: [{ kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutUserMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-layout-user-menu', standalone: true, imports: [SdAvatar, SdIcon, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _presentation = presentation();\n@let _role = role();\n@let _notificationBadge = notificationBadge();\n<div class=\"sd-layout-user-menu position-relative\">\n  @if (_presentation !== 'disclosure') {\n    <div class=\"sd-layout-user-menu__mobile d-flex flex-column gap-8\">\n      <div\n        data-mobile-account-row\n        class=\"sd-layout-user-menu__mobile-row sd-layout-user-menu__mobile--inline d-flex align-items-center gap-8\">\n        <div data-user-summary class=\"sd-layout-user-menu__summary d-flex align-items-center gap-8 flex-1\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action sd-layout-user-menu__signout d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n\n      @if (updateProfileAction() || settingAction() || notificationAction() || changePasswordAction()) {\n        <div data-mobile-account-actions class=\"sd-layout-user-menu__mobile-actions d-flex flex-column gap-4\">\n          @if (updateProfileAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"update-profile\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runUpdateProfile()\">\n              <sd-icon name=\"edit\"></sd-icon>\n              {{ 'core.module.layout.user.update-profile' | translate }}\n            </button>\n          }\n          @if (settingAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"setting\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runSetting()\">\n              <sd-icon name=\"settings\"></sd-icon>\n              {{ 'core.module.layout.user.setting' | translate }}\n            </button>\n          }\n          @if (notificationAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"notification\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runNotification()\">\n              <sd-icon name=\"notifications\"></sd-icon>\n              <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n              @if (_notificationBadge) {\n                <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n              }\n            </button>\n          }\n          @if (changePasswordAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"change-password\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runChangePassword()\">\n              <sd-icon name=\"lock\"></sd-icon>\n              {{ 'core.module.layout.user.change-password' | translate }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <button\n      #trigger\n      type=\"button\"\n      data-user-trigger\n      class=\"sd-layout-user-menu__trigger d-flex align-items-center text-left\"\n      [class.sd-layout-user-menu__trigger--compact]=\"compact()\"\n      [class.w-full]=\"!compact()\"\n      [class.gap-8]=\"!compact()\"\n      [class.w-56]=\"compact()\"\n      [class.gap-0]=\"compact()\"\n      aria-haspopup=\"menu\"\n      [attr.aria-label]=\"compact() ? displayName() : null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      (click)=\"toggle()\">\n      <sd-avatar [src]=\"avatar()\" [size]=\"compact() ? 32 : 40\"></sd-avatar>\n      @if (!compact()) {\n        <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n          <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n          @if (userInfo().email) {\n            <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n          }\n        </span>\n        <sd-icon [name]=\"isOpen() ? 'expand_less' : 'expand_more'\"></sd-icon>\n      }\n    </button>\n\n    @if (isOpen()) {\n      <div\n        #menu\n        data-user-menu\n        class=\"sd-layout-user-menu__popup d-flex flex-column gap-4 p-8 bg-white border border-black200 rounded-8 mat-elevation-z4\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        (keydown)=\"onMenuKeydown($event)\">\n        <div data-user-identity class=\"sd-layout-user-menu__identity d-flex align-items-center gap-8 px-8 py-4\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (updateProfileAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"update-profile\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runUpdateProfile()\">\n            <sd-icon name=\"edit\"></sd-icon>\n            {{ 'core.module.layout.user.update-profile' | translate }}\n          </button>\n        }\n        @if (settingAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"setting\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runSetting()\">\n            <sd-icon name=\"settings\"></sd-icon>\n            {{ 'core.module.layout.user.setting' | translate }}\n          </button>\n        }\n        @if (notificationAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"notification\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runNotification()\">\n            <sd-icon name=\"notifications\"></sd-icon>\n            <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n            @if (_notificationBadge) {\n              <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n            }\n          </button>\n        }\n        @if (changePasswordAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"change-password\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runChangePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            {{ 'core.module.layout.user.change-password' | translate }}\n          </button>\n        }\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".sd-layout-user-menu__trigger,.sd-layout-user-menu__action{border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-user-menu__trigger:hover,.sd-layout-user-menu__action:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3))}.sd-layout-user-menu__trigger:focus-visible,.sd-layout-user-menu__action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-user-menu__trigger--compact{width:56px;min-height:52px;justify-content:center;gap:0;padding:0}.sd-layout-user-menu__popup{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);width:272px}.sd-layout-user-menu__popup .sd-layout-user-menu__action,.sd-layout-user-menu__mobile-actions .sd-layout-user-menu__action{width:100%}.sd-layout-user-menu__summary{min-width:0;padding:0 8px}.sd-layout-user-menu__identity{min-width:0}.sd-layout-user-menu__signout{width:auto;flex:0 0 auto;min-height:40px;white-space:nowrap}.sd-layout-user-menu__role sd-icon{width:14px;height:14px;font-size:14px;flex:0 0 auto}.sd-layout-user-menu__badge{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--sd-error, #ba1a1a);color:var(--sd-white, #ffffff);font-size:11px;line-height:18px;text-align:center}.sd-layout-user-menu__signout:hover{background:var(--sd-error-light, #ffdad6);color:var(--sd-error-dark, var(--sd-error, #ba1a1a))}@media(prefers-reduced-motion:reduce){.sd-layout-user-menu__trigger,.sd-layout-user-menu__action{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], signout: [{ type: i0.Input, args: [{ isSignal: true, alias: "signout", required: false }] }], changePassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePassword", required: false }] }], updateProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateProfile", required: false }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: false }] }], notification: [{ type: i0.Input, args: [{ isSignal: true, alias: "notification", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
 let LayoutUserComponent$1 = class LayoutUserComponent {
-    // ==========================================
-    // INJECT SERVICES
-    // ==========================================
-    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION);
-    // ==========================================
-    // SIGNAL INPUTS & OUTPUTS
-    // ==========================================
     isMobileOrTablet = input(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
     isMenuLock = input(false, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : /* istanbul ignore next */ []));
     isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : /* istanbul ignore next */ []));
     userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
-    // Chuyển thành void vì các hàm emit hiện tại không truyền data
     menuClosed = output();
     menuOpened = output();
     toggleMenuLock = output();
-    // Config actions
-    singoutLayoutConfig = this.#layoutConfiguration.signout;
-    changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
-    // ==========================================
-    // EVENT HANDLERS
-    // ==========================================
-    onMenuOpened = () => {
+    onMenuOpened() {
         this.menuOpened.emit();
-    };
-    onMenuClosed = () => {
+    }
+    onMenuClosed() {
         this.menuClosed.emit();
-    };
-    keepOpenWhenClickInsideMenu = (event) => {
-        event.stopPropagation();
-    };
-    logout = () => {
-        this.singoutLayoutConfig();
-    };
-    changePassword = () => {
-        // Dùng Optional Chaining gọi hàm cực gọn
-        this.changePasswordLayoutConfig?.();
-    };
-    onToggleMenuLock = (event) => {
+    }
+    onToggleMenuLock(event) {
         this.toggleMenuLock.emit(event);
-    };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "<div class=\"c-layout-user-wrapper\">\n  <sd-layout-user-menu\n    class=\"c-layout-user-avatar\"\n    [userInfo]=\"userInfo()\"\n    [compact]=\"true\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n  @if (!isMobileOrTablet()) {\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  }\n</div>\n", styles: [".c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout-user', imports: [SdIcon, MatMenuModule, MatButtonModule, MatTooltipModule, SdAvatar, TranslatePipe], standalone: true, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'lib-layout-user', imports: [SdIcon, SdLayoutUserMenuComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-layout-user-wrapper\">\n  <sd-layout-user-menu\n    class=\"c-layout-user-avatar\"\n    [userInfo]=\"userInfo()\"\n    [compact]=\"true\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n  @if (!isMobileOrTablet()) {\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  }\n</div>\n", styles: [".c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { isMobileOrTablet: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileOrTablet", required: false }] }], isMenuLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMenuLock", required: false }] }], isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], toggleMenuLock: [{ type: i0.Output, args: ["toggleMenuLock"] }] } });
 
 class SidebarComponent {
@@ -390,7 +729,9 @@ class SidebarComponent {
     // ==========================================
     #router = inject(Router);
     #layoutStorageService = inject(SdLayoutStorageService);
+    #navigationState = inject(SdLayoutNavigationStateService);
     #menuFocusPipe = inject(MenuFocusPipe);
+    #window = inject(DOCUMENT).defaultView;
     #destroyRef = inject(DestroyRef); // Dùng để unsubscribe RxJS tự động
     // ==========================================
     // SIGNAL INPUTS & OUTPUTS
@@ -399,6 +740,7 @@ class SidebarComponent {
     menus = input.required(...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
     userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
     sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     expandSideBar = output();
     popupUserMenuClosed = output();
     popupUserMenuOpened = output();
@@ -406,25 +748,24 @@ class SidebarComponent {
     // ==========================================
     // STATE SIGNALS
     // ==========================================
-    screenHeight = window.innerHeight;
-    isMobileOrTablet = BrowserUtilities.isMobile();
     isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : /* istanbul ignore next */ []));
-    currentPath = signal(window.location.pathname, ...(ngDevMode ? [{ debugName: "currentPath" }] : /* istanbul ignore next */ []));
+    currentPath = signal(this.#window?.location.pathname ?? this.#router.url.split(/[?#]/, 1)[0] ?? '', ...(ngDevMode ? [{ debugName: "currentPath" }] : /* istanbul ignore next */ []));
     searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
     titleMenuGroup = signal('', ...(ngDevMode ? [{ debugName: "titleMenuGroup" }] : /* istanbul ignore next */ []));
     idMenuGroupActive = signal('', ...(ngDevMode ? [{ debugName: "idMenuGroupActive" }] : /* istanbul ignore next */ []));
     menusByGroup = signal([], ...(ngDevMode ? [{ debugName: "menusByGroup" }] : /* istanbul ignore next */ []));
     #hoveredMenuNodeKey = signal(null, ...(ngDevMode ? [{ debugName: "#hoveredMenuNodeKey" }] : /* istanbul ignore next */ []));
     #pinIconHoverTimerId = signal(null, ...(ngDevMode ? [{ debugName: "#pinIconHoverTimerId" }] : /* istanbul ignore next */ []));
-    pinnedMenuGroup = signal(this.#layoutStorageService.pinnedMenuGroup.get() ?? {
+    pinnedMenuGroup = computed(() => ({
         id: 'pinned-menu-group',
         title: 'Đã ghim',
-        children: [],
-    }, ...(ngDevMode ? [{ debugName: "pinnedMenuGroup" }] : /* istanbul ignore next */ []));
+        children: this.#navigationState.pinnedMenus(),
+    }), ...(ngDevMode ? [{ debugName: "pinnedMenuGroup" }] : /* istanbul ignore next */ []));
     // ==========================================
     // COMPUTED STATE
     // ==========================================
     totalMenuInMenusByGroup = computed(() => this.#getTotalMenus(this.menusByGroup()), ...(ngDevMode ? [{ debugName: "totalMenuInMenusByGroup" }] : /* istanbul ignore next */ []));
+    logoUrl = computed(() => this.sidebar().logoUrl?.trim() || undefined, ...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
     pinnedNodeKeys = computed(() => new Set(this.pinnedMenuGroup().children?.map(m => this.#getMenuNodeKey(m)) ?? []), ...(ngDevMode ? [{ debugName: "pinnedNodeKeys" }] : /* istanbul ignore next */ []));
     isPinnedMenuGroupActive = computed(() => this.idMenuGroupActive() === this.pinnedMenuGroup().id, ...(ngDevMode ? [{ debugName: "isPinnedMenuGroupActive" }] : /* istanbul ignore next */ []));
     // ==========================================
@@ -442,6 +783,7 @@ class SidebarComponent {
         effect(() => {
             const currentMenus = this.menus();
             untracked(() => {
+                this.#navigationState.hydrate(currentMenus);
                 const lastActiveMenuGroupId = this.#layoutStorageService.lastActiveMenuGroupId.get();
                 const pinnedGroup = this.pinnedMenuGroup();
                 const isPinEnabled = this.sidebar()?.pin?.enabled;
@@ -459,8 +801,9 @@ class SidebarComponent {
     #setupSubscriptions() {
         this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
             if (event instanceof NavigationEnd) {
-                if (this.currentPath() !== window.location.pathname) {
-                    this.currentPath.set(window.location.pathname);
+                const currentPath = event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '';
+                if (this.currentPath() !== currentPath) {
+                    this.currentPath.set(currentPath);
                     this.#bindingMenuGroupByCurrentPath(this.menus());
                 }
             }
@@ -486,15 +829,7 @@ class SidebarComponent {
     };
     onTogglePin = (event, node) => {
         event.stopPropagation();
-        const key = this.#getMenuNodeKey(node);
-        this.pinnedMenuGroup.update(group => {
-            const children = group.children ?? [];
-            const exists = children.some(m => this.#getMenuNodeKey(m) === key);
-            const updatedChildren = exists ? children.filter(m => this.#getMenuNodeKey(m) !== key) : [...children, node];
-            const updatedGroup = { id: 'pinned-menu-group', title: 'Đã ghim', children: updatedChildren };
-            this.#layoutStorageService.pinnedMenuGroup.set(updatedGroup);
-            return updatedGroup;
-        });
+        this.#navigationState.togglePinned(node);
     };
     #onExpandAllMenuNodes = (menus) => {
         menus?.forEach(menu => {
@@ -519,12 +854,7 @@ class SidebarComponent {
         this.showSideBar.emit(this.isMenuLock());
     }
     openHomePage = () => {
-        if (!this.isMobileOrTablet) {
-            this.#router.navigateByUrl('/layout/home');
-        }
-        else {
-            window.location.href = '/layout/home';
-        }
+        this.#router.navigateByUrl('/layout/home');
         this.searchText.set('');
         this.#layoutStorageService.lastActiveMenuGroupId.set('');
     };
@@ -533,14 +863,14 @@ class SidebarComponent {
     navigate = (args) => {
         const { path, queryParams } = args;
         if (path.includes('http')) {
-            window.open(path);
+            this.#window?.open(path, '_blank', 'noopener');
             return;
         }
         this.#router.navigate([path.split('?')[0]], {
             queryParams,
             state: { switchTab: true },
         });
-        if (this.isMobileOrTablet) {
+        if (this.isMobile()) {
             this.#closeMenu();
         }
     };
@@ -571,7 +901,7 @@ class SidebarComponent {
         this.idMenuGroupActive.set(menuGroupNode?.id);
         this.#layoutStorageService.lastActiveMenuGroupId.set(menuGroupNode?.id || '');
         if (!this.currentPath()) {
-            this.currentPath.set(window.location.pathname);
+            this.currentPath.set(this.#window?.location.pathname ?? this.#router.url.split(/[?#]/, 1)[0] ?? '');
         }
     };
     // ==========================================
@@ -887,20 +1217,20 @@ class SidebarComponent {
         return str.trim();
     };
     #getTotalMenus = (menus) => {
-        return menus.reduce((total, menu) => total + this.#countMenuChildrenNode(menu), 0);
+        return menus.reduce((total, menu) => total + this.#countMenuNode(menu), 0);
     };
-    #countMenuChildrenNode = (menu) => {
+    #countMenuNode = (menu) => {
         if (!('children' in menu) || !menu.children?.length) {
-            return 0;
+            return 1;
         }
-        let count = menu.children.length;
+        let count = 1;
         for (const child of menu.children) {
-            count += this.#countMenuChildrenNode(child);
+            count += this.#countMenuNode(child);
         }
         return count;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                }\" name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\" [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\"\n                        (click)=\"onTogglePin($event, node)\" name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon class=\"c-menu-node-description-icon-expand\" [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i2$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i2$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobile() ? '100dvh' : '100%'\">\n    <div class=\"c-header\">\n      <div class=\"c-logo\">\n        <a href=\"javascript:;\" aria-label=\"Trang ch\u1EE7\" (click)=\"openHomePage()\">\n          @if (logoUrl(); as _logoUrl) {\n            <img alt=\"\" [src]=\"_logoUrl\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n        </a>\n      </div>\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\"\n                name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\"\n                  [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() > 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [autoId]=\"'layout-v1-menu-search'\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (currentPath() | menuFocus: node)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon\n                          class=\"c-menu-node-description-icon-expand\"\n                          [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobile()\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sd-text-secondary, #44474f)}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:contain}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;flex:0 0 60px;min-width:60px;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}:host ::ng-deep .c-menu-tree-search input:focus-visible{outline:1px solid var(--sd-primary, #005cbb);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -919,8 +1249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         SdSuffixDefDirective,
                         LayoutUserComponent$1,
                         TranslatePipe,
-                    ], template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive() ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive() ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                }\" name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor: idMenuGroupActive() === nodeMenuGroup?.id ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\" [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input size=\"sm\" [placeholder]=\"'core.module.layout.sidebar.search' | translate\" [model]=\"searchText()\" (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor: (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color: (currentPath() | menuFocus: node) ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)' : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\"\n                        (click)=\"onTogglePin($event, node)\" name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon class=\"c-menu-node-description-icon-expand\" [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobileOrTablet\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], expandSideBar: [{ type: i0.Output, args: ["expandSideBar"] }], popupUserMenuClosed: [{ type: i0.Output, args: ["popupUserMenuClosed"] }], popupUserMenuOpened: [{ type: i0.Output, args: ["popupUserMenuOpened"] }], showSideBar: [{ type: i0.Output, args: ["showSideBar"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobile() ? '100dvh' : '100%'\">\n    <div class=\"c-header\">\n      <div class=\"c-logo\">\n        <a href=\"javascript:;\" aria-label=\"Trang ch\u1EE7\" (click)=\"openHomePage()\">\n          @if (logoUrl(); as _logoUrl) {\n            <img alt=\"\" [src]=\"_logoUrl\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n        </a>\n      </div>\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\"\n                name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\"\n                  [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() > 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [autoId]=\"'layout-v1-menu-search'\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (currentPath() | menuFocus: node)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon\n                          class=\"c-menu-node-description-icon-expand\"\n                          [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobile()\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sd-text-secondary, #44474f)}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:contain}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;flex:0 0 60px;min-width:60px;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}:host ::ng-deep .c-menu-tree-search input:focus-visible{outline:1px solid var(--sd-primary, #005cbb);outline-offset:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], expandSideBar: [{ type: i0.Output, args: ["expandSideBar"] }], popupUserMenuClosed: [{ type: i0.Output, args: ["popupUserMenuClosed"] }], popupUserMenuOpened: [{ type: i0.Output, args: ["popupUserMenuOpened"] }], showSideBar: [{ type: i0.Output, args: ["showSideBar"] }] } });
 
 class SidebarV1Component {
     // ==========================================
@@ -934,14 +1264,14 @@ class SidebarV1Component {
     menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
     userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
     sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     // ==========================================
     // STATE SIGNALS
     // ==========================================
-    isMobileOrTablet = signal(BrowserUtilities.isMobile(), ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
     // Trạng thái khóa menu (luôn mở rộng hay không)
     isMenuLock = signal(this.#layoutStorageService.menuLockStatus?.get() ?? true, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : /* istanbul ignore next */ []));
     // Trạng thái hiển thị (mở/đóng) của Sidenav
-    isShowSidebar = signal(BrowserUtilities.isMobile() ? false : (this.#layoutStorageService.menuLockStatus?.get() ?? true), ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : /* istanbul ignore next */ []));
+    isShowSidebar = signal(this.isMobile() ? false : (this.#layoutStorageService.menuLockStatus?.get() ?? true), ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : /* istanbul ignore next */ []));
     onhover = signal(false, ...(ngDevMode ? [{ debugName: "onhover" }] : /* istanbul ignore next */ []));
     // ==========================================
     // PRIVATE TIMERS
@@ -983,7 +1313,7 @@ class SidebarV1Component {
         }
     };
     openSidebar = () => {
-        if (!this.isMobileOrTablet()) {
+        if (!this.isMobile()) {
             return;
         }
         if (!this.isShowSidebar()) {
@@ -1005,7 +1335,7 @@ class SidebarV1Component {
         }
     };
     onExpandSideBar = () => {
-        if (this.isMobileOrTablet()) {
+        if (this.isMobile()) {
             return;
         }
         if (!this.isShowSidebar()) {
@@ -1014,11 +1344,16 @@ class SidebarV1Component {
         }
     };
     onMouseleaveSideBar = () => {
-        if (this.isMobileOrTablet()) {
+        if (this.isMobile()) {
             return;
         }
         this.#mouseLeave();
     };
+    onSidenavOpenedChange = (opened) => {
+        if (this.isMobile()) {
+            this.isShowSidebar.set(opened);
+        }
+    };
     onToggle = (data) => {
         if (data === null) {
             this.#handleMouseLeaveTransition();
@@ -1027,34 +1362,29 @@ class SidebarV1Component {
             this.#mouseLeave();
             this.isShowSidebar.set(data);
             this.isMenuLock.set(data);
-            // Toggle component MatSidenav
-            const sidenavComp = this.sidenav();
-            if (sidenavComp) {
-                if (data) {
-                    sidenavComp.open();
-                }
-                else {
-                    sidenavComp.close();
+            // Desktop keeps the Material drawer mounted as a 60px rail; mobile still opens and closes the overlay.
+            if (this.isMobile()) {
+                const sidenavComp = this.sidenav();
+                if (sidenavComp) {
+                    if (data) {
+                        sidenavComp.open();
+                    }
+                    else {
+                        sidenavComp.close();
+                    }
                 }
             }
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SidebarV1Component, isStandalone: true, selector: "sidebar-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobileOrTablet()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SidebarV1Component, isStandalone: true, selector: "sidebar-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"!isMobile() || isShowSidebar()\"\n    (openedChange)=\"onSidenavOpenedChange($event)\"\n    class=\"c-layout-sidebar\"\n    [class.is-expanded]=\"isShowSidebar()\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobile()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isMobile]=\"isMobile()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:clip!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.is-expanded{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar", "isMobile"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV1Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar-v1', imports: [MatSidenavModule, CommonModule, SidebarComponent], standalone: true, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobileOrTablet() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobileOrTablet()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { sidenav: [{ type: i0.ViewChild, args: ['sidenav', { isSignal: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
+            args: [{ selector: 'sidebar-v1', imports: [MatSidenavModule, CommonModule, SidebarComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"!isMobile() || isShowSidebar()\"\n    (openedChange)=\"onSidenavOpenedChange($event)\"\n    class=\"c-layout-sidebar\"\n    [class.is-expanded]=\"isShowSidebar()\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobile()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isMobile]=\"isMobile()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:clip!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.is-expanded{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sidenav: [{ type: i0.ViewChild, args: ['sidenav', { isSignal: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }] } });
 
 class LayoutUserComponent {
-    // ==========================================
-    // INJECT SERVICES
-    // ==========================================
-    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION);
-    // ==========================================
-    // SIGNAL INPUTS & OUTPUTS
-    // ==========================================
     isMobileOrTablet = input(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
     isMenuLock = input(false, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : /* istanbul ignore next */ []));
     isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : /* istanbul ignore next */ []));
@@ -1062,47 +1392,21 @@ class LayoutUserComponent {
     menuClosed = output();
     menuOpened = output();
     toggleMenuLock = output();
-    // Config actions
-    singoutLayoutConfig = this.#layoutConfiguration.signout;
-    changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
-    // Accordion state for mobile inline expand
-    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
-    // ==========================================
-    // EVENT HANDLERS
-    // ==========================================
-    onMenuOpened = () => {
+    onMenuOpened() {
         this.menuOpened.emit();
-    };
-    onMenuClosed = () => {
+    }
+    onMenuClosed() {
         this.menuClosed.emit();
-    };
-    keepOpenWhenClickInsideMenu = (event) => {
-        event.stopPropagation();
-    };
-    toggleExpanded = () => {
-        this.isExpanded.update(v => !v);
-        if (this.isExpanded()) {
-            this.menuOpened.emit();
-        }
-        else {
-            this.menuClosed.emit();
-        }
-    };
-    logout = () => {
-        this.singoutLayoutConfig();
-    };
-    changePassword = () => {
-        this.changePasswordLayoutConfig?.();
-    };
-    onToggleMenuLock = (event) => {
+    }
+    onToggleMenuLock(event) {
         this.toggleMenuLock.emit(event);
-    };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <sd-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\" name=\"keyboard_arrow_down\"></sd-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <sd-icon name=\"logout\"></sd-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action sd-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout sd-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@if (isMobileOrTablet()) {\n  <sd-layout-user-menu [userInfo]=\"userInfo()\" presentation=\"mobile\"></sd-layout-user-menu>\n} @else {\n  <div class=\"c-layout-user-wrapper\">\n    <sd-layout-user-menu\n      class=\"c-layout-user-avatar\"\n      [userInfo]=\"userInfo()\"\n      [compact]=\"true\"\n      (opened)=\"onMenuOpened()\"\n      (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout-user', imports: [SdIcon, MatMenuModule, MatButtonModule, MatTooltipModule, SdAvatar, TranslatePipe], standalone: true, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <sd-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\" name=\"keyboard_arrow_down\"></sd-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <sd-icon name=\"logout\"></sd-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action sd-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout sd-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'lib-layout-user', imports: [SdIcon, SdLayoutUserMenuComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileOrTablet()) {\n  <sd-layout-user-menu [userInfo]=\"userInfo()\" presentation=\"mobile\"></sd-layout-user-menu>\n} @else {\n  <div class=\"c-layout-user-wrapper\">\n    <sd-layout-user-menu\n      class=\"c-layout-user-avatar\"\n      [userInfo]=\"userInfo()\"\n      [compact]=\"true\"\n      (opened)=\"onMenuOpened()\"\n      (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { isMobileOrTablet: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileOrTablet", required: false }] }], isMenuLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMenuLock", required: false }] }], isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], toggleMenuLock: [{ type: i0.Output, args: ["toggleMenuLock"] }] } });
 
 class SidebarMobileOverlayComponent {
@@ -1296,12 +1600,513 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'sidebar-mobile-v1', imports: [SdIcon, CommonModule, SidebarMobileOverlayComponent], standalone: true, template: "<div class=\"c-mobile-layout\">\n  <div class=\"c-mobile-topbar\">\n    <div class=\"c-topbar-brand\">\n      @if (sidebar().logoUrl) {\n        <img class=\"c-topbar-logo\" [src]=\"sidebar().logoUrl\" alt=\"logo\" />\n      }\n      <span class=\"c-topbar-title\">{{ titleMenuGroup() || sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button class=\"c-hamburger-btn\" (click)=\"openSidebar()\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </div>\n\n  <div class=\"c-mobile-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <sd-sidebar-mobile-overlay\n    [menus]=\"menus()\"\n    [userInfo]=\"userInfo()\"\n    [sidebar]=\"sidebar()\"\n    [isShowSidebar]=\"isShowSidebar()\"\n    (showSideBar)=\"onToggle($event)\"\n    (expandSideBar)=\"onExpandSideBar()\"\n    (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n    (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\"\n    (titleMenuGroupChanged)=\"onTitleMenuGroupChanged($event)\">\n  </sd-sidebar-mobile-overlay>\n</div>\n", styles: [":host{display:block;height:100vh;position:relative;overflow:hidden}.c-mobile-layout{display:flex;flex-direction:column;height:100%;position:relative}.c-mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;background-color:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.c-mobile-topbar .c-topbar-brand{display:flex;align-items:center;gap:10px;overflow:hidden}.c-mobile-topbar .c-topbar-brand .c-topbar-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0}.c-mobile-topbar .c-topbar-brand .c-topbar-title{font-size:16px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-mobile-topbar .c-hamburger-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;color:#333;flex-shrink:0}.c-mobile-topbar .c-hamburger-btn:hover{background-color:#0000000f}.c-mobile-content{flex:1;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
+class SdLayoutMenuTreeComponent {
+    #destroyRef = inject(DestroyRef);
+    #hoveredPinKey = signal(null, ...(ngDevMode ? [{ debugName: "#hoveredPinKey" }] : /* istanbul ignore next */ []));
+    #pinHoverTimerId;
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    query = input('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    activePath = input('', ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    pinnedKeys = input([], ...(ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []));
+    showPin = input(true, ...(ngDevMode ? [{ debugName: "showPin" }] : /* istanbul ignore next */ []));
+    pinVisibility = input('hover', ...(ngDevMode ? [{ debugName: "pinVisibility" }] : /* istanbul ignore next */ []));
+    navigate = output();
+    togglePinned = output();
+    nodes = computed(() => {
+        const pinnedKeys = new Set(this.pinnedKeys());
+        const hoveredPinKey = this.#hoveredPinKey();
+        const alwaysShowPin = this.pinVisibility() === 'always';
+        const query = this.query().trim();
+        const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
+        const nodes = [];
+        const append = (items, depth, ancestors) => {
+            for (const menu of items) {
+                const key = getMenuStableKey(menu, ancestors);
+                if (!key)
+                    continue;
+                const isGroup = 'children' in menu && !!menu.children?.length;
+                const path = 'path' in menu ? menu.path : '';
+                nodes.push({
+                    menu,
+                    key,
+                    title: menu.title ?? menu.tooltipTitle ?? '',
+                    depth,
+                    paddingLeft: 12 + depth * 16,
+                    isGroup,
+                    isActive: !!path && this.#pathMatches(this.activePath(), path),
+                    isPinned: pinnedKeys.has(key),
+                    isPinVisible: alwaysShowPin || pinnedKeys.has(key) || hoveredPinKey === key,
+                });
+                if (isGroup && 'children' in menu)
+                    append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
+            }
+        };
+        append(menus, 0, []);
+        return nodes;
+    }, ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.#destroyRef.onDestroy(() => this.#clearPinHoverTimer());
+    }
+    onNavigate(menu) {
+        if ('path' in menu)
+            this.navigate.emit(menu);
+    }
+    onTogglePinned(event, menu) {
+        event.stopPropagation();
+        this.togglePinned.emit(menu);
+    }
+    onPinHoverStart(key) {
+        if (this.pinVisibility() === 'always')
+            return;
+        this.#clearPinHoverTimer();
+        this.#pinHoverTimerId = setTimeout(() => {
+            this.#hoveredPinKey.set(key);
+            this.#pinHoverTimerId = undefined;
+        }, 300);
+    }
+    onPinHoverEnd(key) {
+        this.#clearPinHoverTimer();
+        if (this.#hoveredPinKey() === key)
+            this.#hoveredPinKey.set(null);
+    }
+    #clearPinHoverTimer() {
+        if (this.#pinHoverTimerId === undefined)
+            return;
+        clearTimeout(this.#pinHoverTimerId);
+        this.#pinHoverTimerId = undefined;
+    }
+    #pathMatches(currentPath, menuPath) {
+        const normalize = (path) => (path.endsWith('/') ? path : `${path}/`);
+        return currentPath === menuPath || normalize(currentPath).startsWith(normalize(menuPath));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutMenuTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutMenuTreeComponent, isStandalone: true, selector: "sd-layout-menu-tree", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, activePath: { classPropertyName: "activePath", publicName: "activePath", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, showPin: { classPropertyName: "showPin", publicName: "showPin", isSignal: true, isRequired: false, transformFunction: null }, pinVisibility: { classPropertyName: "pinVisibility", publicName: "pinVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", togglePinned: "togglePinned" }, ngImport: i0, template: "<nav class=\"d-flex flex-column gap-4\" aria-label=\"Navigation menu\">\n  @for (node of nodes(); track node.key) {\n    @if (node.isGroup) {\n      <div class=\"sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400\" [style.padding-left.px]=\"node.paddingLeft\">\n        <sd-icon [name]=\"node.menu.icon || 'folder'\"></sd-icon>\n        <span class=\"text-ellipsis\">{{ node.title }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"sd-layout-menu-tree__route d-flex align-items-center gap-4\"\n        (mouseenter)=\"onPinHoverStart(node.key)\"\n        (mouseleave)=\"onPinHoverEnd(node.key)\">\n        <button\n          type=\"button\"\n          class=\"sd-layout-menu-tree__route-button d-flex align-items-center gap-8 flex-1 text-left T14R\"\n          data-menu-route\n          [attr.data-menu-key]=\"node.key\"\n          [attr.aria-current]=\"node.isActive ? 'page' : null\"\n          [class.sd-layout-menu-tree__route-button--active]=\"node.isActive\"\n          [style.padding-left.px]=\"node.paddingLeft\"\n          (click)=\"onNavigate(node.menu)\">\n          @if (node.menu.iconUrl) {\n            <img class=\"sd-layout-menu-tree__icon-image\" [src]=\"node.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"node.menu.icon || 'chevron_right'\"></sd-icon>\n          }\n          <span class=\"text-ellipsis\">{{ node.title }}</span>\n        </button>\n        @if (showPin()) {\n          <button\n            type=\"button\"\n            class=\"sd-layout-menu-tree__pin d-flex align-items-center justify-content-center\"\n            [class.sd-layout-menu-tree__pin--visible]=\"node.isPinVisible\"\n            [attr.data-pin-key]=\"node.key\"\n            [attr.aria-label]=\"node.isPinned ? 'Unpin ' + node.title : 'Pin ' + node.title\"\n            [attr.aria-pressed]=\"node.isPinned\"\n            (click)=\"onTogglePinned($event, node.menu)\">\n            <sd-icon name=\"push_pin\"></sd-icon>\n          </button>\n        }\n      </div>\n    }\n  } @empty {\n    <div class=\"d-flex flex-column align-items-center justify-content-center gap-12 p-24 text-black400 T14R\">\n      Kh\u00F4ng t\u00ECm th\u1EA5y menu ph\u00F9 h\u1EE3p\n    </div>\n  }\n</nav>\n", styles: [".sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{min-height:40px;border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-menu-tree__route-button--active{color:var(--sd-primary);background:var(--sd-primary-light);font-weight:500}.sd-layout-menu-tree__route-button:hover,.sd-layout-menu-tree__pin:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3));color:var(--sd-primary, #005cbb)}.sd-layout-menu-tree__route-button--active:hover{background:var(--sd-primary-light, #d7e3ff)}.sd-layout-menu-tree__route-button:focus-visible,.sd-layout-menu-tree__pin:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-menu-tree__pin{width:36px;flex:0 0 36px;opacity:0;pointer-events:none;transition:opacity .12s ease,background-color .12s ease,color .12s ease}.sd-layout-menu-tree__pin--visible,.sd-layout-menu-tree__pin:focus-visible{opacity:1;pointer-events:auto}.sd-layout-menu-tree__group{min-height:32px}.sd-layout-menu-tree__icon-image{width:20px;height:20px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutMenuTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-layout-menu-tree', standalone: true, imports: [SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"d-flex flex-column gap-4\" aria-label=\"Navigation menu\">\n  @for (node of nodes(); track node.key) {\n    @if (node.isGroup) {\n      <div class=\"sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400\" [style.padding-left.px]=\"node.paddingLeft\">\n        <sd-icon [name]=\"node.menu.icon || 'folder'\"></sd-icon>\n        <span class=\"text-ellipsis\">{{ node.title }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"sd-layout-menu-tree__route d-flex align-items-center gap-4\"\n        (mouseenter)=\"onPinHoverStart(node.key)\"\n        (mouseleave)=\"onPinHoverEnd(node.key)\">\n        <button\n          type=\"button\"\n          class=\"sd-layout-menu-tree__route-button d-flex align-items-center gap-8 flex-1 text-left T14R\"\n          data-menu-route\n          [attr.data-menu-key]=\"node.key\"\n          [attr.aria-current]=\"node.isActive ? 'page' : null\"\n          [class.sd-layout-menu-tree__route-button--active]=\"node.isActive\"\n          [style.padding-left.px]=\"node.paddingLeft\"\n          (click)=\"onNavigate(node.menu)\">\n          @if (node.menu.iconUrl) {\n            <img class=\"sd-layout-menu-tree__icon-image\" [src]=\"node.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"node.menu.icon || 'chevron_right'\"></sd-icon>\n          }\n          <span class=\"text-ellipsis\">{{ node.title }}</span>\n        </button>\n        @if (showPin()) {\n          <button\n            type=\"button\"\n            class=\"sd-layout-menu-tree__pin d-flex align-items-center justify-content-center\"\n            [class.sd-layout-menu-tree__pin--visible]=\"node.isPinVisible\"\n            [attr.data-pin-key]=\"node.key\"\n            [attr.aria-label]=\"node.isPinned ? 'Unpin ' + node.title : 'Pin ' + node.title\"\n            [attr.aria-pressed]=\"node.isPinned\"\n            (click)=\"onTogglePinned($event, node.menu)\">\n            <sd-icon name=\"push_pin\"></sd-icon>\n          </button>\n        }\n      </div>\n    }\n  } @empty {\n    <div class=\"d-flex flex-column align-items-center justify-content-center gap-12 p-24 text-black400 T14R\">\n      Kh\u00F4ng t\u00ECm th\u1EA5y menu ph\u00F9 h\u1EE3p\n    </div>\n  }\n</nav>\n", styles: [".sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{min-height:40px;border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-menu-tree__route-button--active{color:var(--sd-primary);background:var(--sd-primary-light);font-weight:500}.sd-layout-menu-tree__route-button:hover,.sd-layout-menu-tree__pin:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3));color:var(--sd-primary, #005cbb)}.sd-layout-menu-tree__route-button--active:hover{background:var(--sd-primary-light, #d7e3ff)}.sd-layout-menu-tree__route-button:focus-visible,.sd-layout-menu-tree__pin:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-menu-tree__pin{width:36px;flex:0 0 36px;opacity:0;pointer-events:none;transition:opacity .12s ease,background-color .12s ease,color .12s ease}.sd-layout-menu-tree__pin--visible,.sd-layout-menu-tree__pin:focus-visible{opacity:1;pointer-events:auto}.sd-layout-menu-tree__group{min-height:32px}.sd-layout-menu-tree__icon-image{width:20px;height:20px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], activePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePath", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], showPin: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPin", required: false }] }], pinVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinVisibility", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], togglePinned: [{ type: i0.Output, args: ["togglePinned"] }] } });
+
+class SdLayoutSearchFieldComponent {
+    model = input('', ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    autoId = input.required(...(ngDevMode ? [{ debugName: "autoId" }] : /* istanbul ignore next */ []));
+    sdChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutSearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SdLayoutSearchFieldComponent, isStandalone: true, selector: "sd-layout-search-field", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sdChange: "sdChange" }, ngImport: i0, template: "<div\n  data-layout-search\n  class=\"sd-layout-search-field sd-layout-search-field--soft-pill d-flex align-items-center gap-8\">\n  <sd-icon class=\"sd-layout-search-field__icon\" name=\"search\"></sd-icon>\n  <sd-input\n    class=\"sd-layout-search-field__control\"\n    size=\"sm\"\n    hideInlineError\n    [placeholder]=\"placeholder()\"\n    [autoId]=\"autoId()\"\n    [model]=\"model()\"\n    (sdChange)=\"sdChange.emit($event)\">\n  </sd-input>\n</div>\n", styles: [":host{display:block;min-width:0}.sd-layout-search-field{min-height:38px;padding:0 12px;border:0;border-radius:9999px;outline:1px solid transparent;outline-offset:1px;background:var(--sd-black100, var(--sd-surface-muted));color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field:focus-within{outline-color:var(--sd-primary)}.sd-layout-search-field__icon{flex:0 0 auto;color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field__control{flex:1;min-width:0;--sd-border: transparent;--mdc-outlined-text-field-outline-color: transparent;--mdc-outlined-text-field-hover-outline-color: transparent;--mdc-outlined-text-field-focus-outline-color: transparent;--mdc-outlined-text-field-input-text-placeholder-color: var(--sd-black400, var(--sd-text-muted));--mdc-outlined-text-field-container-shape: 0px}:host ::ng-deep .sd-layout-search-field__control input:focus-visible{outline:0}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutSearchFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-layout-search-field', standalone: true, imports: [SdIcon, SdInput], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  data-layout-search\n  class=\"sd-layout-search-field sd-layout-search-field--soft-pill d-flex align-items-center gap-8\">\n  <sd-icon class=\"sd-layout-search-field__icon\" name=\"search\"></sd-icon>\n  <sd-input\n    class=\"sd-layout-search-field__control\"\n    size=\"sm\"\n    hideInlineError\n    [placeholder]=\"placeholder()\"\n    [autoId]=\"autoId()\"\n    [model]=\"model()\"\n    (sdChange)=\"sdChange.emit($event)\">\n  </sd-input>\n</div>\n", styles: [":host{display:block;min-width:0}.sd-layout-search-field{min-height:38px;padding:0 12px;border:0;border-radius:9999px;outline:1px solid transparent;outline-offset:1px;background:var(--sd-black100, var(--sd-surface-muted));color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field:focus-within{outline-color:var(--sd-primary)}.sd-layout-search-field__icon{flex:0 0 auto;color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field__control{flex:1;min-width:0;--sd-border: transparent;--mdc-outlined-text-field-outline-color: transparent;--mdc-outlined-text-field-hover-outline-color: transparent;--mdc-outlined-text-field-focus-outline-color: transparent;--mdc-outlined-text-field-input-text-placeholder-color: var(--sd-black400, var(--sd-text-muted));--mdc-outlined-text-field-container-shape: 0px}:host ::ng-deep .sd-layout-search-field__control input:focus-visible{outline:0}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: true }] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }] } });
+
+class SidebarV2Component {
+    #router = inject(Router);
+    #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #navigationState = inject(SdLayoutNavigationStateService);
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    activeGroupKey = signal('', ...(ngDevMode ? [{ debugName: "activeGroupKey" }] : /* istanbul ignore next */ []));
+    isFlyoutOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFlyoutOpen" }] : /* istanbul ignore next */ []));
+    isFlyoutLocked = signal(false, ...(ngDevMode ? [{ debugName: "isFlyoutLocked" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '', ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    interaction = computed(() => resolveSidebarV2Interaction(this.sidebar()), ...(ngDevMode ? [{ debugName: "interaction" }] : /* istanbul ignore next */ []));
+    railItems = computed(() => this.menus()
+        .map(menu => ({ menu, key: getMenuStableKey(menu), title: menu.tooltipTitle || menu.title || 'Menu' }))
+        .filter(item => !!item.key), ...(ngDevMode ? [{ debugName: "railItems" }] : /* istanbul ignore next */ []));
+    activeGroup = computed(() => this.railItems().find(item => item.key === this.activeGroupKey())?.menu, ...(ngDevMode ? [{ debugName: "activeGroup" }] : /* istanbul ignore next */ []));
+    contextMenus = computed(() => {
+        const activeGroup = this.activeGroup();
+        if (!activeGroup)
+            return [];
+        return 'children' in activeGroup && activeGroup.children?.length ? activeGroup.children : [activeGroup];
+    }, ...(ngDevMode ? [{ debugName: "contextMenus" }] : /* istanbul ignore next */ []));
+    pinnedKeys = this.#navigationState.pinnedKeys;
+    constructor() {
+        effect(() => {
+            const menus = this.menus();
+            untracked(() => {
+                this.#navigationState.hydrate(menus);
+                const persistedState = this.#navigationState.versionState(2);
+                if (persistedState.activeGroupKey && !this.activeGroupKey())
+                    this.activeGroupKey.set(persistedState.activeGroupKey);
+            });
+        });
+        this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (!(event instanceof NavigationEnd))
+                return;
+            this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
+            this.closeFromNavigation();
+        });
+    }
+    selectGroup(menu) {
+        const key = getMenuStableKey(menu);
+        if (!key)
+            return;
+        if (this.interaction() === 'click') {
+            if (this.activeGroupKey() === key && this.isFlyoutOpen()) {
+                this.#closeFlyout();
+                return;
+            }
+            this.#openGroup(key, false);
+            return;
+        }
+        if (this.activeGroupKey() === key && this.isFlyoutLocked()) {
+            this.#closeFlyout();
+            return;
+        }
+        this.#openGroup(key, true);
+    }
+    previewGroup(menu) {
+        if (this.interaction() !== 'hover-lock' || this.isFlyoutLocked())
+            return;
+        const key = getMenuStableKey(menu);
+        if (key)
+            this.#openGroup(key, false, false);
+    }
+    leaveFlyout() {
+        if (this.interaction() === 'hover-lock' && !this.isFlyoutLocked())
+            this.#closeFlyout(false);
+    }
+    closeFromBackdrop() {
+        this.#closeFlyout();
+    }
+    closeFromEscape() {
+        this.#closeFlyout();
+    }
+    closeFromNavigation() {
+        this.#closeFlyout();
+    }
+    onNavigate(menu) {
+        if (!('path' in menu))
+            return;
+        this.#navigationState.recordRecent(menu, { enabled: true, maxItems: 5 });
+        if (menu.path.includes('http')) {
+            this.#document.defaultView?.open(menu.path, '_blank', 'noopener');
+            this.closeFromNavigation();
+            return;
+        }
+        void this.#router.navigate([menu.path.split('?')[0]], {
+            queryParams: menu.queryParams ?? {},
+            state: { switchTab: true },
+        });
+    }
+    onTogglePinned(menu) {
+        this.#navigationState.togglePinned(menu);
+    }
+    #openGroup(key, locked, persist = true) {
+        this.activeGroupKey.set(key);
+        this.isFlyoutOpen.set(true);
+        this.isFlyoutLocked.set(locked);
+        this.searchText.set('');
+        if (persist)
+            this.#navigationState.patchVersionState(2, { activeGroupKey: key, locked });
+    }
+    #closeFlyout(persist = true) {
+        this.isFlyoutOpen.set(false);
+        this.isFlyoutLocked.set(false);
+        this.searchText.set('');
+        if (persist)
+            this.#navigationState.patchVersionState(2, { locked: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarV2Component, isStandalone: true, selector: "sidebar-v2", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-v2\" (keydown.escape)=\"closeFromEscape()\">\n  <aside class=\"sd-sidebar-v2__rail d-flex flex-column align-items-center gap-8 py-12 bg-white border-right border-black200\">\n    <button type=\"button\" class=\"sd-sidebar-v2__brand d-flex align-items-center justify-content-center\" aria-label=\"Trang ch\u1EE7\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-v2__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      } @else {\n        <sd-icon name=\"apps\"></sd-icon>\n      }\n    </button>\n\n    <nav class=\"d-flex flex-column align-items-center gap-4 flex-1\" aria-label=\"Nh\u00F3m menu\">\n      @for (item of railItems(); track item.key) {\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-v2__rail-action d-flex flex-column align-items-center justify-content-center gap-4\"\n          [attr.data-v2-group-key]=\"item.key\"\n          [attr.aria-label]=\"item.title\"\n          [attr.aria-expanded]=\"activeGroupKey() === item.key && isFlyoutOpen()\"\n          [class.sd-sidebar-v2__rail-action--active]=\"activeGroupKey() === item.key\"\n          (click)=\"selectGroup(item.menu)\"\n          (mouseenter)=\"previewGroup(item.menu)\"\n          (focus)=\"previewGroup(item.menu)\">\n          @if (item.menu.iconUrl) {\n            <img class=\"sd-sidebar-v2__rail-icon\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n          }\n          <span class=\"sd-sidebar-v2__rail-label text-ellipsis\">{{ item.title }}</span>\n        </button>\n      }\n    </nav>\n\n    <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"true\"></sd-layout-user-menu>\n  </aside>\n\n  @if (isFlyoutOpen()) {\n    <button\n      type=\"button\"\n      class=\"sd-sidebar-v2__backdrop\"\n      aria-label=\"\u0110\u00F3ng menu\"\n      (click)=\"closeFromBackdrop()\"\n      (keydown.escape)=\"closeFromEscape()\"></button>\n    <section\n      class=\"sd-sidebar-v2__flyout d-flex flex-column bg-white border-right border-black200 mat-elevation-z4\"\n      [attr.aria-label]=\"activeGroup()?.title || 'Menu'\"\n      (mouseleave)=\"leaveFlyout()\"\n      (keydown.escape)=\"closeFromEscape()\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ activeGroup()?.title || sidebar().defaultTitle || 'Menu' }}</span>\n        @if (isFlyoutLocked()) {\n          <sd-icon name=\"lock\"></sd-icon>\n        }\n      </header>\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong nh\u00F3m\"\n          [autoId]=\"'layout-v2-context-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"flex-1 overflow-auto px-8 pb-12\">\n        <sd-layout-menu-tree\n          [menus]=\"contextMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n\n  <main class=\"sd-sidebar-v2__content\" data-v2-content data-content-offset=\"rail\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v2{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v2__rail{position:fixed;z-index:30;inset:0 auto 0 0;width:72px}.sd-sidebar-v2__brand,.sd-sidebar-v2__rail-action{width:56px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v2__rail-action:hover,.sd-sidebar-v2__rail-action--active{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v2__brand:focus-visible,.sd-sidebar-v2__rail-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v2__rail-label{width:52px;font-size:10px;line-height:12px;text-align:center}.sd-sidebar-v2__logo,.sd-sidebar-v2__rail-icon{width:24px;height:24px;object-fit:contain}.sd-sidebar-v2__backdrop{position:fixed;z-index:10;inset:0;border:0;background:transparent}.sd-sidebar-v2__flyout{position:fixed;z-index:20;inset:0 auto 0 72px;width:320px}.sd-sidebar-v2__content{min-height:100vh;margin-left:72px}@media(prefers-reduced-motion:reduce){.sd-sidebar-v2__flyout{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'sidebar-v2', standalone: true, imports: [SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-v2\" (keydown.escape)=\"closeFromEscape()\">\n  <aside class=\"sd-sidebar-v2__rail d-flex flex-column align-items-center gap-8 py-12 bg-white border-right border-black200\">\n    <button type=\"button\" class=\"sd-sidebar-v2__brand d-flex align-items-center justify-content-center\" aria-label=\"Trang ch\u1EE7\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-v2__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      } @else {\n        <sd-icon name=\"apps\"></sd-icon>\n      }\n    </button>\n\n    <nav class=\"d-flex flex-column align-items-center gap-4 flex-1\" aria-label=\"Nh\u00F3m menu\">\n      @for (item of railItems(); track item.key) {\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-v2__rail-action d-flex flex-column align-items-center justify-content-center gap-4\"\n          [attr.data-v2-group-key]=\"item.key\"\n          [attr.aria-label]=\"item.title\"\n          [attr.aria-expanded]=\"activeGroupKey() === item.key && isFlyoutOpen()\"\n          [class.sd-sidebar-v2__rail-action--active]=\"activeGroupKey() === item.key\"\n          (click)=\"selectGroup(item.menu)\"\n          (mouseenter)=\"previewGroup(item.menu)\"\n          (focus)=\"previewGroup(item.menu)\">\n          @if (item.menu.iconUrl) {\n            <img class=\"sd-sidebar-v2__rail-icon\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n          }\n          <span class=\"sd-sidebar-v2__rail-label text-ellipsis\">{{ item.title }}</span>\n        </button>\n      }\n    </nav>\n\n    <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"true\"></sd-layout-user-menu>\n  </aside>\n\n  @if (isFlyoutOpen()) {\n    <button\n      type=\"button\"\n      class=\"sd-sidebar-v2__backdrop\"\n      aria-label=\"\u0110\u00F3ng menu\"\n      (click)=\"closeFromBackdrop()\"\n      (keydown.escape)=\"closeFromEscape()\"></button>\n    <section\n      class=\"sd-sidebar-v2__flyout d-flex flex-column bg-white border-right border-black200 mat-elevation-z4\"\n      [attr.aria-label]=\"activeGroup()?.title || 'Menu'\"\n      (mouseleave)=\"leaveFlyout()\"\n      (keydown.escape)=\"closeFromEscape()\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ activeGroup()?.title || sidebar().defaultTitle || 'Menu' }}</span>\n        @if (isFlyoutLocked()) {\n          <sd-icon name=\"lock\"></sd-icon>\n        }\n      </header>\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong nh\u00F3m\"\n          [autoId]=\"'layout-v2-context-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"flex-1 overflow-auto px-8 pb-12\">\n        <sd-layout-menu-tree\n          [menus]=\"contextMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n\n  <main class=\"sd-sidebar-v2__content\" data-v2-content data-content-offset=\"rail\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v2{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v2__rail{position:fixed;z-index:30;inset:0 auto 0 0;width:72px}.sd-sidebar-v2__brand,.sd-sidebar-v2__rail-action{width:56px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v2__rail-action:hover,.sd-sidebar-v2__rail-action--active{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v2__brand:focus-visible,.sd-sidebar-v2__rail-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v2__rail-label{width:52px;font-size:10px;line-height:12px;text-align:center}.sd-sidebar-v2__logo,.sd-sidebar-v2__rail-icon{width:24px;height:24px;object-fit:contain}.sd-sidebar-v2__backdrop{position:fixed;z-index:10;inset:0;border:0;background:transparent}.sd-sidebar-v2__flyout{position:fixed;z-index:20;inset:0 auto 0 72px;width:320px}.sd-sidebar-v2__content{min-height:100vh;margin-left:72px}@media(prefers-reduced-motion:reduce){.sd-sidebar-v2__flyout{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
+
+class SidebarMobileV2Component {
+    #router = inject(Router);
+    #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #navigationState = inject(SdLayoutNavigationStateService);
+    #restoreFocusElement = null;
+    #previousBodyOverflow = '';
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    primaryMenus = computed(() => selectPrimaryMenuGroups(this.menus(), this.sidebar().primaryMenuIds), ...(ngDevMode ? [{ debugName: "primaryMenus" }] : /* istanbul ignore next */ []));
+    overflowMenus = computed(() => {
+        const primaryKeys = new Set(this.primaryMenus().map(menu => getMenuStableKey(menu)));
+        return this.menus().filter(menu => !primaryKeys.has(getMenuStableKey(menu)));
+    }, ...(ngDevMode ? [{ debugName: "overflowMenus" }] : /* istanbul ignore next */ []));
+    isSheetOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSheetOpen" }] : /* istanbul ignore next */ []));
+    sheetGroupKey = signal('', ...(ngDevMode ? [{ debugName: "sheetGroupKey" }] : /* istanbul ignore next */ []));
+    sheetTitle = signal('', ...(ngDevMode ? [{ debugName: "sheetTitle" }] : /* istanbul ignore next */ []));
+    sheetMenus = signal([], ...(ngDevMode ? [{ debugName: "sheetMenus" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '', ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    pinnedKeys = this.#navigationState.pinnedKeys;
+    constructor() {
+        effect(() => {
+            const menus = this.menus();
+            untracked(() => this.#navigationState.hydrate(menus));
+        });
+        this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (!(event instanceof NavigationEnd))
+                return;
+            this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
+            this.closeSheet(false);
+        });
+        this.#destroyRef.onDestroy(() => this.#releaseBodyScroll());
+    }
+    openMore(trigger) {
+        this.#openSheet('more', 'Thêm', this.overflowMenus(), trigger);
+    }
+    activateMenu(menu, trigger) {
+        if ('path' in menu) {
+            this.#navigate(menu);
+            return;
+        }
+        this.#openSheet(getMenuStableKey(menu), menu.title || 'Menu', menu.children ?? [], trigger);
+    }
+    closeSheet(restoreFocus = true) {
+        if (!this.isSheetOpen())
+            return;
+        this.isSheetOpen.set(false);
+        this.searchText.set('');
+        this.#releaseBodyScroll();
+        if (restoreFocus)
+            this.#restoreFocusElement?.focus();
+        this.#restoreFocusElement = null;
+    }
+    onSheetKeydown(event) {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        this.closeSheet();
+    }
+    onNavigate(menu) {
+        if ('path' in menu)
+            this.#navigate(menu);
+    }
+    onTogglePinned(menu) {
+        this.#navigationState.togglePinned(menu);
+    }
+    #openSheet(key, title, menus, trigger) {
+        this.sheetGroupKey.set(key);
+        this.sheetTitle.set(title);
+        this.sheetMenus.set(menus);
+        this.searchText.set('');
+        this.#restoreFocusElement =
+            trigger instanceof HTMLElement ? trigger : this.#document.activeElement instanceof HTMLElement ? this.#document.activeElement : null;
+        if (!this.isSheetOpen()) {
+            this.#previousBodyOverflow = this.#document.body.style.overflow;
+            this.#document.body.style.overflow = 'hidden';
+        }
+        this.isSheetOpen.set(true);
+    }
+    #navigate(menu) {
+        this.#navigationState.recordRecent(menu, { enabled: true, maxItems: 5 });
+        if (menu.path.includes('http')) {
+            this.#document.defaultView?.open(menu.path, '_blank', 'noopener');
+            this.closeSheet();
+            return;
+        }
+        void this.#router
+            .navigate([menu.path.split('?')[0]], { queryParams: menu.queryParams ?? {}, state: { switchTab: true } })
+            .then(navigated => {
+            if (navigated)
+                this.closeSheet();
+        });
+    }
+    #releaseBodyScroll() {
+        this.#document.body.style.overflow = this.#previousBodyOverflow;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarMobileV2Component, isStandalone: true, selector: "sidebar-mobile-v2", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-mobile-v2 d-flex flex-column\">\n  <main class=\"sd-sidebar-mobile-v2__content flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  <nav class=\"sd-sidebar-mobile-v2__bar d-flex align-items-stretch bg-white border-top border-black200\" aria-label=\"\u0110i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n    @for (menu of primaryMenus(); track menu.id || menu.title) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        [attr.data-mobile-menu-key]=\"menu.id ? 'id:' + menu.id : null\"\n        [attr.aria-label]=\"menu.tooltipTitle || menu.title || 'Menu'\"\n        [attr.aria-expanded]=\"sheetGroupKey() === (menu.id ? 'id:' + menu.id : '') && isSheetOpen()\"\n        (click)=\"activateMenu(menu, $event.currentTarget)\">\n        @if (menu.iconUrl) {\n          <img class=\"sd-sidebar-mobile-v2__icon\" [src]=\"menu.iconUrl\" alt=\"\" />\n        } @else {\n          <sd-icon [name]=\"menu.icon || 'widgets'\"></sd-icon>\n        }\n        <span class=\"sd-sidebar-mobile-v2__label text-ellipsis\">{{ menu.tooltipTitle || menu.title }}</span>\n      </button>\n    }\n    @if (overflowMenus().length) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        aria-label=\"Th\u00EAm menu\"\n        [attr.aria-expanded]=\"sheetGroupKey() === 'more' && isSheetOpen()\"\n        (click)=\"openMore($event.currentTarget)\">\n        <sd-icon name=\"more_horiz\"></sd-icon>\n        <span class=\"sd-sidebar-mobile-v2__label\">Th\u00EAm</span>\n      </button>\n    }\n  </nav>\n\n  @if (isSheetOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v2__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeSheet()\"></button>\n    <section\n      data-v2-sheet\n      class=\"sd-sidebar-mobile-v2__sheet d-flex flex-column bg-white rounded-top-16 mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"sheetTitle()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onSheetKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ sheetTitle() }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v2__close d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng\"\n          (click)=\"closeSheet()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"d-flex flex-column gap-12 p-12 overflow-auto\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong menu\"\n          [autoId]=\"'layout-v2-mobile-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n        <sd-layout-menu-tree\n          [menus]=\"sheetMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          pinVisibility=\"always\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v2{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));background:var(--sd-light)}.sd-sidebar-mobile-v2__bar{position:fixed;z-index:30;inset:auto 0 0;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v2__bar-action,.sd-sidebar-mobile-v2__close{min-width:0;min-height:48px;border:0;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-mobile-v2__bar-action:hover,.sd-sidebar-mobile-v2__close:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v2__bar-action:focus-visible,.sd-sidebar-mobile-v2__close:focus-visible{outline:2px solid var(--sd-primary);outline-offset:-2px}.sd-sidebar-mobile-v2__label{max-width:72px;font-size:11px;line-height:14px}.sd-sidebar-mobile-v2__icon{width:22px;height:22px;object-fit:contain}.sd-sidebar-mobile-v2__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v2__sheet{position:fixed;z-index:50;inset:auto 0 0;max-height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v2__sheet{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'sidebar-mobile-v2', standalone: true, imports: [A11yModule, SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-mobile-v2 d-flex flex-column\">\n  <main class=\"sd-sidebar-mobile-v2__content flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  <nav class=\"sd-sidebar-mobile-v2__bar d-flex align-items-stretch bg-white border-top border-black200\" aria-label=\"\u0110i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n    @for (menu of primaryMenus(); track menu.id || menu.title) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        [attr.data-mobile-menu-key]=\"menu.id ? 'id:' + menu.id : null\"\n        [attr.aria-label]=\"menu.tooltipTitle || menu.title || 'Menu'\"\n        [attr.aria-expanded]=\"sheetGroupKey() === (menu.id ? 'id:' + menu.id : '') && isSheetOpen()\"\n        (click)=\"activateMenu(menu, $event.currentTarget)\">\n        @if (menu.iconUrl) {\n          <img class=\"sd-sidebar-mobile-v2__icon\" [src]=\"menu.iconUrl\" alt=\"\" />\n        } @else {\n          <sd-icon [name]=\"menu.icon || 'widgets'\"></sd-icon>\n        }\n        <span class=\"sd-sidebar-mobile-v2__label text-ellipsis\">{{ menu.tooltipTitle || menu.title }}</span>\n      </button>\n    }\n    @if (overflowMenus().length) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        aria-label=\"Th\u00EAm menu\"\n        [attr.aria-expanded]=\"sheetGroupKey() === 'more' && isSheetOpen()\"\n        (click)=\"openMore($event.currentTarget)\">\n        <sd-icon name=\"more_horiz\"></sd-icon>\n        <span class=\"sd-sidebar-mobile-v2__label\">Th\u00EAm</span>\n      </button>\n    }\n  </nav>\n\n  @if (isSheetOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v2__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeSheet()\"></button>\n    <section\n      data-v2-sheet\n      class=\"sd-sidebar-mobile-v2__sheet d-flex flex-column bg-white rounded-top-16 mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"sheetTitle()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onSheetKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ sheetTitle() }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v2__close d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng\"\n          (click)=\"closeSheet()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"d-flex flex-column gap-12 p-12 overflow-auto\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong menu\"\n          [autoId]=\"'layout-v2-mobile-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n        <sd-layout-menu-tree\n          [menus]=\"sheetMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          pinVisibility=\"always\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v2{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));background:var(--sd-light)}.sd-sidebar-mobile-v2__bar{position:fixed;z-index:30;inset:auto 0 0;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v2__bar-action,.sd-sidebar-mobile-v2__close{min-width:0;min-height:48px;border:0;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-mobile-v2__bar-action:hover,.sd-sidebar-mobile-v2__close:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v2__bar-action:focus-visible,.sd-sidebar-mobile-v2__close:focus-visible{outline:2px solid var(--sd-primary);outline-offset:-2px}.sd-sidebar-mobile-v2__label{max-width:72px;font-size:11px;line-height:14px}.sd-sidebar-mobile-v2__icon{width:22px;height:22px;object-fit:contain}.sd-sidebar-mobile-v2__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v2__sheet{position:fixed;z-index:50;inset:auto 0 0;max-height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v2__sheet{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
+
+class SidebarV3Component {
+    #router = inject(Router);
+    #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #navigationState = inject(SdLayoutNavigationStateService);
+    #initialized = false;
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '', ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    searchResults = computed(() => searchMenuLeaves(this.menus(), this.searchText()), ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
+    recentConfiguration = computed(() => resolveSidebarV3Recent(this.sidebar()), ...(ngDevMode ? [{ debugName: "recentConfiguration" }] : /* istanbul ignore next */ []));
+    pinnedKeys = this.#navigationState.pinnedKeys;
+    pinnedMenus = this.#navigationState.pinnedMenus;
+    recentMenus = this.#navigationState.recentMenus;
+    collapsedItems = computed(() => this.menus().map(menu => ({ menu, key: getMenuStableKey(menu), title: menu.tooltipTitle || menu.title || 'Menu' })), ...(ngDevMode ? [{ debugName: "collapsedItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const menus = this.menus();
+            const sidebar = this.sidebar();
+            const recentConfiguration = resolveSidebarV3Recent(sidebar);
+            untracked(() => {
+                this.#navigationState.hydrate(menus, recentConfiguration.maxItems);
+                if (this.#initialized)
+                    return;
+                const persistedCollapsed = this.#navigationState.versionState(3).collapsed;
+                this.isCollapsed.set(typeof persistedCollapsed === 'boolean' ? persistedCollapsed : (sidebar.defaultCollapsed ?? false));
+                this.#initialized = true;
+            });
+        });
+        this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (event instanceof NavigationEnd)
+                this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
+        });
+    }
+    toggleCollapsed() {
+        this.isCollapsed.update(collapsed => !collapsed);
+        this.#navigationState.patchVersionState(3, { collapsed: this.isCollapsed() });
+    }
+    activateCollapsedMenu(menu) {
+        if ('path' in menu)
+            this.navigateMenu(menu);
+        else {
+            this.isCollapsed.set(false);
+            this.#navigationState.patchVersionState(3, { collapsed: false });
+        }
+    }
+    navigateMenu(menu) {
+        if (!('path' in menu))
+            return;
+        this.#navigationState.recordRecent(menu, this.recentConfiguration());
+        if (menu.path.includes('http')) {
+            this.#document.defaultView?.open(menu.path, '_blank', 'noopener');
+            return;
+        }
+        void this.#router.navigate([menu.path.split('?')[0]], {
+            queryParams: menu.queryParams ?? {},
+            state: { switchTab: true },
+        });
+    }
+    onTogglePinned(menu) {
+        this.#navigationState.togglePinned(menu);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarV3Component, isStandalone: true, selector: "sidebar-v3", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-v3\" [class.sd-sidebar-v3--collapsed]=\"isCollapsed()\">\n  <aside\n    class=\"sd-sidebar-v3__drawer d-flex flex-column bg-white border-right border-black200\"\n    data-v3-sidebar\n    [attr.data-collapsed]=\"isCollapsed()\">\n    <header\n      data-v3-header\n      class=\"sd-sidebar-v3__header d-flex align-items-center gap-8 p-12 border-bottom border-black200\"\n      [class.sd-sidebar-v3__header--collapsed]=\"isCollapsed()\"\n      [class.justify-content-between]=\"!isCollapsed()\"\n      [class.justify-content-center]=\"isCollapsed()\">\n      @if (!isCollapsed()) {\n        <div data-v3-brand class=\"d-flex align-items-center gap-8 overflow-hidden\">\n          @if (sidebar().logoUrl) {\n            <img class=\"sd-sidebar-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n          <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        </div>\n      }\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-v3__icon-action d-flex align-items-center justify-content-center\"\n        [attr.aria-label]=\"isCollapsed() ? 'M\u1EDF r\u1ED9ng sidebar' : 'Thu g\u1ECDn sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        (click)=\"toggleCollapsed()\">\n        <sd-icon [name]=\"isCollapsed() ? 'chevron_right' : 'chevron_left'\"></sd-icon>\n      </button>\n    </header>\n\n    @if (isCollapsed()) {\n      <nav class=\"d-flex flex-column align-items-center gap-4 p-8 flex-1\" aria-label=\"Menu thu g\u1ECDn\">\n        @for (item of collapsedItems(); track item.key) {\n          <button\n            type=\"button\"\n            class=\"sd-sidebar-v3__collapsed-action d-flex align-items-center justify-content-center\"\n            [attr.aria-label]=\"item.title\"\n            (click)=\"activateCollapsedMenu(item.menu)\">\n            @if (item.menu.iconUrl) {\n              <img class=\"sd-sidebar-v3__logo\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n            } @else {\n              <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n            }\n          </button>\n        }\n      </nav>\n    } @else {\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n          [autoId]=\"'layout-v3-global-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"sd-sidebar-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto px-8 pb-12\">\n        @if (pinnedMenus().length) {\n          <section data-v3-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    }\n\n    <div class=\"p-8 border-top border-black200\">\n      <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"isCollapsed()\"></sd-layout-user-menu>\n    </div>\n  </aside>\n\n  <main class=\"sd-sidebar-v3__content\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v3{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v3__drawer{position:fixed;z-index:20;inset:0 auto 0 0;width:304px;transition:width .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__drawer{width:72px}.sd-sidebar-v3__content{min-height:100vh;margin-left:304px;transition:margin-left .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__content{margin-left:72px}.sd-sidebar-v3__icon-action,.sd-sidebar-v3__collapsed-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v3__icon-action:hover,.sd-sidebar-v3__collapsed-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v3__icon-action:focus-visible,.sd-sidebar-v3__collapsed-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v3__logo{width:28px;height:28px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-sidebar-v3__drawer,.sd-sidebar-v3__content{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV3Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'sidebar-v3', standalone: true, imports: [SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-v3\" [class.sd-sidebar-v3--collapsed]=\"isCollapsed()\">\n  <aside\n    class=\"sd-sidebar-v3__drawer d-flex flex-column bg-white border-right border-black200\"\n    data-v3-sidebar\n    [attr.data-collapsed]=\"isCollapsed()\">\n    <header\n      data-v3-header\n      class=\"sd-sidebar-v3__header d-flex align-items-center gap-8 p-12 border-bottom border-black200\"\n      [class.sd-sidebar-v3__header--collapsed]=\"isCollapsed()\"\n      [class.justify-content-between]=\"!isCollapsed()\"\n      [class.justify-content-center]=\"isCollapsed()\">\n      @if (!isCollapsed()) {\n        <div data-v3-brand class=\"d-flex align-items-center gap-8 overflow-hidden\">\n          @if (sidebar().logoUrl) {\n            <img class=\"sd-sidebar-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n          <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        </div>\n      }\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-v3__icon-action d-flex align-items-center justify-content-center\"\n        [attr.aria-label]=\"isCollapsed() ? 'M\u1EDF r\u1ED9ng sidebar' : 'Thu g\u1ECDn sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        (click)=\"toggleCollapsed()\">\n        <sd-icon [name]=\"isCollapsed() ? 'chevron_right' : 'chevron_left'\"></sd-icon>\n      </button>\n    </header>\n\n    @if (isCollapsed()) {\n      <nav class=\"d-flex flex-column align-items-center gap-4 p-8 flex-1\" aria-label=\"Menu thu g\u1ECDn\">\n        @for (item of collapsedItems(); track item.key) {\n          <button\n            type=\"button\"\n            class=\"sd-sidebar-v3__collapsed-action d-flex align-items-center justify-content-center\"\n            [attr.aria-label]=\"item.title\"\n            (click)=\"activateCollapsedMenu(item.menu)\">\n            @if (item.menu.iconUrl) {\n              <img class=\"sd-sidebar-v3__logo\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n            } @else {\n              <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n            }\n          </button>\n        }\n      </nav>\n    } @else {\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n          [autoId]=\"'layout-v3-global-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"sd-sidebar-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto px-8 pb-12\">\n        @if (pinnedMenus().length) {\n          <section data-v3-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    }\n\n    <div class=\"p-8 border-top border-black200\">\n      <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"isCollapsed()\"></sd-layout-user-menu>\n    </div>\n  </aside>\n\n  <main class=\"sd-sidebar-v3__content\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v3{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v3__drawer{position:fixed;z-index:20;inset:0 auto 0 0;width:304px;transition:width .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__drawer{width:72px}.sd-sidebar-v3__content{min-height:100vh;margin-left:304px;transition:margin-left .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__content{margin-left:72px}.sd-sidebar-v3__icon-action,.sd-sidebar-v3__collapsed-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v3__icon-action:hover,.sd-sidebar-v3__collapsed-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v3__icon-action:focus-visible,.sd-sidebar-v3__collapsed-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v3__logo{width:28px;height:28px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-sidebar-v3__drawer,.sd-sidebar-v3__content{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
+
+class SidebarMobileV3Component {
+    #router = inject(Router);
+    #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #navigationState = inject(SdLayoutNavigationStateService);
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    #restoreFocusElement = null;
+    #previousBodyOverflow = '';
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
+    sidebar = input.required(...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    isDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDrawerOpen" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    activePath = signal(this.#router.url.split(/[?#]/, 1)[0] ?? '', ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    searchResults = computed(() => searchMenuLeaves(this.menus(), this.searchText()), ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
+    recentConfiguration = computed(() => resolveSidebarV3Recent(this.sidebar()), ...(ngDevMode ? [{ debugName: "recentConfiguration" }] : /* istanbul ignore next */ []));
+    pinnedKeys = this.#navigationState.pinnedKeys;
+    pinnedMenus = this.#navigationState.pinnedMenus;
+    recentMenus = this.#navigationState.recentMenus;
+    constructor() {
+        effect(() => {
+            const menus = this.menus();
+            const maximum = resolveSidebarV3Recent(this.sidebar()).maxItems;
+            untracked(() => this.#navigationState.hydrate(menus, maximum));
+        });
+        this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (!(event instanceof NavigationEnd))
+                return;
+            this.activePath.set(event.urlAfterRedirects.split(/[?#]/, 1)[0] ?? '');
+            this.closeFromNavigation();
+        });
+        this.#destroyRef.onDestroy(() => this.#releaseBodyScroll());
+    }
+    openDrawer(trigger) {
+        this.#restoreFocusElement =
+            trigger instanceof HTMLElement
+                ? trigger
+                : this.#document.activeElement instanceof HTMLElement
+                    ? this.#document.activeElement
+                    : (this.trigger()?.nativeElement ?? null);
+        if (!this.isDrawerOpen()) {
+            this.#previousBodyOverflow = this.#document.body.style.overflow;
+            this.#document.body.style.overflow = 'hidden';
+        }
+        this.isDrawerOpen.set(true);
+    }
+    closeFromBackdrop() {
+        this.#closeDrawer();
+    }
+    closeFromEscape() {
+        this.#closeDrawer();
+    }
+    closeFromNavigation() {
+        this.#closeDrawer();
+    }
+    onDrawerKeydown(event) {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        this.closeFromEscape();
+    }
+    navigateMenu(menu) {
+        if (!('path' in menu))
+            return;
+        this.#navigationState.recordRecent(menu, this.recentConfiguration());
+        if (menu.path.includes('http')) {
+            this.#document.defaultView?.open(menu.path, '_blank', 'noopener');
+            this.closeFromNavigation();
+            return;
+        }
+        void this.#router
+            .navigate([menu.path.split('?')[0]], { queryParams: menu.queryParams ?? {}, state: { switchTab: true } })
+            .then(navigated => {
+            if (navigated)
+                this.closeFromNavigation();
+        });
+    }
+    onTogglePinned(menu) {
+        this.#navigationState.togglePinned(menu);
+    }
+    #closeDrawer() {
+        if (!this.isDrawerOpen())
+            return;
+        this.isDrawerOpen.set(false);
+        this.searchText.set('');
+        this.#releaseBodyScroll();
+        (this.#restoreFocusElement ?? this.trigger()?.nativeElement)?.focus();
+        this.#restoreFocusElement = null;
+    }
+    #releaseBodyScroll() {
+        this.#document.body.style.overflow = this.#previousBodyOverflow;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarMobileV3Component, isStandalone: true, selector: "sidebar-mobile-v3", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sd-sidebar-mobile-v3 d-flex flex-column\">\n  <header\n    class=\"sd-sidebar-mobile-v3__topbar d-flex align-items-center justify-content-between gap-8 px-16 bg-white border-bottom border-black200\">\n    <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-mobile-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      }\n      <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button\n      #trigger\n      type=\"button\"\n      data-v3-mobile-trigger\n      class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n      aria-label=\"M\u1EDF menu\"\n      [attr.aria-expanded]=\"isDrawerOpen()\"\n      (click)=\"openDrawer($event.currentTarget)\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </header>\n\n  <main class=\"flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  @if (isDrawerOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v3__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeFromBackdrop()\"></button>\n    <aside\n      class=\"sd-sidebar-mobile-v3__drawer d-flex flex-column bg-white mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu ch\u00EDnh\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onDrawerKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T18M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng menu\"\n          (click)=\"closeFromBackdrop()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"sd-sidebar-mobile-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto p-12\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <div class=\"sd-sidebar-mobile-v3__search bg-white\">\n          <sd-layout-search-field\n            placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n            [autoId]=\"'layout-v3-mobile-global-search'\"\n            [model]=\"searchText()\"\n            (sdChange)=\"searchText.set($event)\">\n          </sd-layout-search-field>\n        </div>\n        @if (pinnedMenus().length) {\n          <section data-v3-mobile-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              pinVisibility=\"always\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-mobile-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            pinVisibility=\"always\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v3{min-height:100dvh;background:var(--sd-light)}.sd-sidebar-mobile-v3__topbar{min-height:56px}.sd-sidebar-mobile-v3__icon-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black500);cursor:pointer}.sd-sidebar-mobile-v3__icon-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v3__icon-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-mobile-v3__logo{width:28px;height:28px;object-fit:contain}.sd-sidebar-mobile-v3__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v3__drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v3__search{position:sticky;z-index:2;top:-12px;margin:-12px;padding:12px;background:var(--sd-white, #fff)}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v3__drawer{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV3Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'sidebar-mobile-v3', standalone: true, imports: [A11yModule, SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-mobile-v3 d-flex flex-column\">\n  <header\n    class=\"sd-sidebar-mobile-v3__topbar d-flex align-items-center justify-content-between gap-8 px-16 bg-white border-bottom border-black200\">\n    <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-mobile-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      }\n      <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button\n      #trigger\n      type=\"button\"\n      data-v3-mobile-trigger\n      class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n      aria-label=\"M\u1EDF menu\"\n      [attr.aria-expanded]=\"isDrawerOpen()\"\n      (click)=\"openDrawer($event.currentTarget)\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </header>\n\n  <main class=\"flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  @if (isDrawerOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v3__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeFromBackdrop()\"></button>\n    <aside\n      class=\"sd-sidebar-mobile-v3__drawer d-flex flex-column bg-white mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu ch\u00EDnh\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onDrawerKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T18M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng menu\"\n          (click)=\"closeFromBackdrop()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"sd-sidebar-mobile-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto p-12\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <div class=\"sd-sidebar-mobile-v3__search bg-white\">\n          <sd-layout-search-field\n            placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n            [autoId]=\"'layout-v3-mobile-global-search'\"\n            [model]=\"searchText()\"\n            (sdChange)=\"searchText.set($event)\">\n          </sd-layout-search-field>\n        </div>\n        @if (pinnedMenus().length) {\n          <section data-v3-mobile-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              pinVisibility=\"always\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-mobile-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            pinVisibility=\"always\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v3{min-height:100dvh;background:var(--sd-light)}.sd-sidebar-mobile-v3__topbar{min-height:56px}.sd-sidebar-mobile-v3__icon-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black500);cursor:pointer}.sd-sidebar-mobile-v3__icon-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v3__icon-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-mobile-v3__logo{width:28px;height:28px;object-fit:contain}.sd-sidebar-mobile-v3__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v3__drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v3__search{position:sticky;z-index:2;top:-12px;margin:-12px;padding:12px;background:var(--sd-white, #fff)}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v3__drawer{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
+
 class SdLayoutComponent {
     // ==========================================
     // INJECT SERVICES
     // ==========================================
     #menuPipe = inject(MenuPipe);
     #layoutService = inject(SdLayoutService);
+    #responsiveService = inject(SdLayoutResponsiveService);
+    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION, { optional: true });
     // ==========================================
     // SIGNAL INPUTS
     // ==========================================
@@ -1312,13 +2117,34 @@ class SdLayoutComponent {
     // ==========================================
     userInfo = this.#layoutService.userInfo;
     sidebar = this.#layoutService.sidebar;
-    isMobileOrTablet = signal(BrowserUtilities.isMobile(), ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
+    sidebarV1 = computed(() => {
+        const sidebar = this.sidebar();
+        return sidebar?.version === 1 ? sidebar : undefined;
+    }, ...(ngDevMode ? [{ debugName: "sidebarV1" }] : /* istanbul ignore next */ []));
+    sidebarV2 = computed(() => {
+        const sidebar = this.sidebar();
+        return sidebar?.version === 2 ? sidebar : undefined;
+    }, ...(ngDevMode ? [{ debugName: "sidebarV2" }] : /* istanbul ignore next */ []));
+    sidebarV3 = computed(() => {
+        const sidebar = this.sidebar();
+        return sidebar?.version === 3 ? sidebar : undefined;
+    }, ...(ngDevMode ? [{ debugName: "sidebarV3" }] : /* istanbul ignore next */ []));
+    mobileBreakpoint = normalizeLayoutMobileBreakpoint(this.#layoutConfiguration?.mobileBreakpoint);
+    isMobile = computed(() => this.#responsiveService.isMobile(this.mobileBreakpoint), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutComponent, isStandalone: true, selector: "sd-layout", inputs: { menusInput: { classPropertyName: "menusInput", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar?.version === 1) {\n  @if (!isMobileOrTablet()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: SidebarV1Component, selector: "sidebar-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV1Component, selector: "sidebar-mobile-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutComponent, isStandalone: true, selector: "sd-layout", inputs: { menusInput: { classPropertyName: "menusInput", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: SidebarV1Component, selector: "sidebar-v1", inputs: ["menus", "userInfo", "sidebar", "isMobile"] }, { kind: "component", type: SidebarMobileV1Component, selector: "sidebar-mobile-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarV2Component, selector: "sidebar-v2", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV2Component, selector: "sidebar-mobile-v2", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarV3Component, selector: "sidebar-v3", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV3Component, selector: "sidebar-mobile-v3", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-layout', imports: [SidebarV1Component, SidebarMobileV1Component, NgTemplateOutlet], standalone: true, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar?.version === 1) {\n  @if (!isMobileOrTablet()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebar!\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n" }]
+            args: [{ selector: 'sd-layout', imports: [
+                        SidebarV1Component,
+                        SidebarMobileV1Component,
+                        SidebarV2Component,
+                        SidebarMobileV2Component,
+                        SidebarV3Component,
+                        SidebarMobileV3Component,
+                        NgTemplateOutlet,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { menusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }] } });
 
 // End
@@ -1440,7 +2266,7 @@ const routes = [
 ];
 class HomeRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, imports: [i1$5.RouterModule], exports: [RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, decorators: [{
@@ -1515,7 +2341,7 @@ const Routes$2 = [{ path: '', component: RootComponent$1 }];
 
 class NotFoundModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, imports: [CommonModule, i1$5.RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, imports: [CommonModule, i1$3.RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, imports: [CommonModule, RouterModule.forChild(Routes$2)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, decorators: [{
@@ -1577,7 +2403,7 @@ const Routes$1 = [{ path: '', component: RootComponent }];
 
 class ForbiddenModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, i1$5.RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, i1$3.RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, RouterModule.forChild(Routes$1)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, decorators: [{
@@ -1615,7 +2441,7 @@ const Routes = [
 
 class SdLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, imports: [i1$5.RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, imports: [i1$3.RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, imports: [RouterModule.forChild(Routes)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, decorators: [{
@@ -1631,5 +2457,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ForbiddenModule, HomeModule, NotFoundModule, SD_LAYOUT_CONFIGURATION, SdLayoutComponent, SdLayoutModule, SdLayoutService, SdLayoutStorageService, SdPageComponent, SidebarMobileOverlayComponent, SidebarMobileV1Component };
+export { DEFAULT_LAYOUT_MOBILE_BREAKPOINT, ForbiddenModule, HighlightSearchPipe, HomeModule, MenuFocusPipe, MenuPipe, NotFoundModule, SD_LAYOUT_CONFIGURATION, SD_LAYOUT_VIEWPORT, SdLayoutComponent, SdLayoutMenuTreeComponent, SdLayoutModule, SdLayoutNavigationStateService, SdLayoutResponsiveService, SdLayoutService, SdLayoutStorageService, SdLayoutUserMenuComponent, SdPageComponent, SidebarMobileOverlayComponent, SidebarMobileV1Component, SidebarMobileV2Component, SidebarMobileV3Component, SidebarV2Component, SidebarV3Component, flattenMenuLeaves, getMenuStableKey, normalizeLayoutMobileBreakpoint, normalizeSidebarConfiguration, resolveMenuKeys, resolveSidebarV2Interaction, resolveSidebarV3Recent, searchMenuLeaves, selectPrimaryMenuGroups };
 //# sourceMappingURL=sdcorejs-angular-modules-layout.mjs.map