@flusys/ng-layout 6.3.0 → 6.4.1

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@flusys/ng-layout",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "description": "Layout components for FLUSYS Angular applications",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@flusys/ng-core": ">=6.3.0",
-    "@flusys/ng-shared": ">=6.3.0",
-    "@flusys/ng-ui": ">=6.3.0",
+    "@flusys/ng-core": ">=6.4.1",
+    "@flusys/ng-shared": ">=6.4.1",
+    "@flusys/ng-ui": ">=6.4.1",
     "tailwindcss": ">=4.0.0",
     "rxjs": "^7.8.0"
   },

package/types/flusys-ng-layout.d.ts

@@ -1,24 +1,13 @@
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
 import * as _angular_core from '@angular/core';
 import { Signal, InjectionToken, Type } from '@angular/core';
+import { LayoutConfig, LayoutTheme } from '@flusys/ng-core';
+import { ILogicNode, IconTypeEnum } from '@flusys/ng-shared';
 import { PresetName, ApplyThemeOptions } from '@flusys/ng-ui';
 export { ApplyThemeOptions, applyTheme, buildBootstrapPreset } from '@flusys/ng-ui';
-import * as rxjs from 'rxjs';
-import { Observable } from 'rxjs';
-import { LayoutConfig } from '@flusys/ng-core';
-import { ILogicNode, IconTypeEnum } from '@flusys/ng-shared';
 import * as _flusys_ng_layout from '@flusys/ng-layout';
 
-declare class AppFooter {
-    private readonly layoutService;
-    readonly appName: string;
-    readonly displayLogo: string;
-    readonly isLogoSvg: boolean;
-    readonly authorName: string;
-    readonly authorUrl: string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppFooter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppFooter, "app-footer", never, {}, {}, never, never, true, never>;
-}
-
 interface ILauncherApp {
     id: string;
     /** Display name (use nameKey for localization instead) */
@@ -107,7 +96,6 @@ interface LayoutState {
     configSidebarVisible?: boolean;
     staticMenuMobileActive?: boolean;
     menuHoverActive?: boolean;
-    topbarMenuVisible?: boolean;
 }
 interface MenuChangeEvent {
     key: string;
@@ -162,6 +150,10 @@ declare class LayoutService {
     readonly isMobile: _angular_core.Signal<boolean>;
     readonly isDarkTheme: _angular_core.Signal<boolean | undefined>;
     readonly isOverlay: _angular_core.Signal<boolean>;
+    readonly layoutTheme: _angular_core.Signal<LayoutTheme>;
+    readonly isModernLayout: _angular_core.Signal<boolean>;
+    readonly isClassicLayout: _angular_core.Signal<boolean>;
+    /** The modern skin has no horizontal nav, so topbar mode only applies to the classic skin. */
     readonly isTopbar: _angular_core.Signal<boolean>;
     readonly userName: _angular_core.Signal<string>;
     readonly userEmail: _angular_core.Signal<string>;
@@ -178,6 +170,7 @@ declare class LayoutService {
     readonly resetSource$: rxjs.Observable<boolean>;
     readonly overlayOpen$: rxjs.Observable<void>;
     private initialized;
+    private appliedDarkTheme;
     constructor();
     toggleDarkMode(config?: LayoutConfig): void;
     private handleDarkModeTransition;
@@ -200,16 +193,42 @@ declare class LayoutService {
 declare class LayoutPersistenceService {
     private readonly platformId;
     private readonly isBrowser;
-    private readonly validPresets;
-    private readonly validMenuModes;
     load(): LayoutConfig | null;
     save(config: LayoutConfig): void;
     clear(): void;
+    /**
+     * Coerces a stored value only when it is present and unrecognised. A field the
+     * user never changed stays absent so the app's own default still wins when this
+     * result is merged over it.
+     */
     private validateConfig;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutPersistenceService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutPersistenceService>;
 }
 
+/**
+ * Layout shell entry point.
+ * Renders the skin selected by `LayoutConfig.layoutTheme` — every skin shares
+ * the same services, menu and topbar components, only the markup and styling differ.
+ */
+declare class AppLayout {
+    readonly layoutService: LayoutService;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppLayout, "app-layout", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Home link showing the active company logo and name.
+ * Every skin renders this same markup; sizing and colour come from the bar it sits in.
+ */
+declare class AppBrandLogo {
+    readonly layoutService: LayoutService;
+    readonly companyName: _angular_core.Signal<string>;
+    readonly displayLogo: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppBrandLogo, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppBrandLogo, "app-brand-logo", never, {}, {}, never, never, true, never>;
+}
+
 declare type SurfacesType = {
     name?: string;
     palette?: {
@@ -238,6 +257,10 @@ declare class AppConfigurator {
         label: string;
         value: "static" | "overlay" | "topbar";
     }[]>;
+    readonly layoutThemeOptions: _angular_core.Signal<{
+        label: string;
+        value: LayoutTheme;
+    }[]>;
     constructor();
     readonly surfaces: SurfacesType[];
     readonly selectedPrimaryColor: _angular_core.Signal<string | undefined>;
@@ -245,11 +268,13 @@ declare class AppConfigurator {
     isSurfaceSelected(surfaceName: string | undefined): boolean;
     readonly selectedPreset: _angular_core.Signal<string | undefined>;
     readonly menuMode: _angular_core.Signal<"static" | "overlay" | "topbar" | undefined>;
+    readonly layoutTheme: _angular_core.Signal<LayoutTheme>;
     readonly primaryColors: _angular_core.Signal<SurfacesType[]>;
     updateColors(event: MouseEvent, type: string, color: SurfacesType): void;
     private _applyColorChange;
     onPresetChange(event: string): void;
     onMenuModeChange(event: 'static' | 'overlay' | 'topbar'): void;
+    onLayoutThemeChange(event: LayoutTheme): void;
     private translate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppConfigurator, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppConfigurator, "app-configurator", never, {}, {}, never, never, true, never>;
@@ -264,27 +289,15 @@ declare class AppFloatingConfigurator {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppFloatingConfigurator, "app-floating-configurator", never, {}, {}, never, never, true, never>;
 }
 
-declare class AppLayout {
-    private readonly destroyRef;
-    private readonly document;
-    readonly layoutService: LayoutService;
-    private readonly renderer;
-    private readonly router;
-    private menuOutsideClickListener;
-    constructor();
-    isOutsideClicked(event: MouseEvent): boolean;
-    hideMenu(): void;
-    blockBodyScroll(): void;
-    unblockBodyScroll(): void;
-    readonly isOverlay: _angular_core.Signal<boolean>;
-    readonly isStatic: _angular_core.Signal<boolean>;
-    readonly isTopbarMode: _angular_core.Signal<boolean>;
-    readonly isStaticInactive: _angular_core.Signal<boolean | undefined>;
-    readonly isOverlayActive: _angular_core.Signal<boolean | undefined>;
-    readonly isMobileActive: _angular_core.Signal<boolean | undefined>;
-    readonly isTopbarNavHidden: _angular_core.Signal<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppLayout, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppLayout, "app-layout", never, {}, {}, never, never, true, never>;
+declare class AppFooter {
+    private readonly layoutService;
+    readonly appName: string;
+    readonly displayLogo: string;
+    readonly isLogoSvg: boolean;
+    readonly authorName: string;
+    readonly authorUrl: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppFooter, "app-footer", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -353,34 +366,37 @@ declare class AppMenuitem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppMenuitem, "[app-menuitem]", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; "parentKey": { "alias": "parentKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class AppSidebar {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppSidebar, "app-sidebar", never, {}, {}, never, never, true, never>;
-}
-
-type ActivePanel = 'config' | null;
-declare class AppTopbar {
-    private readonly appConfig;
-    private readonly document;
+/**
+ * Shared shell behaviour for every layout skin.
+ * Holds the menu open/close lifecycle so a skin only owns markup and styling.
+ */
+declare abstract class LayoutShellBase {
     private readonly destroyRef;
+    private readonly document;
+    private readonly renderer;
+    private readonly router;
     readonly layoutService: LayoutService;
-    readonly notificationBellComponent: _angular_core.Type<unknown> | null;
-    readonly languageSelectorComponent: _angular_core.Type<unknown> | null;
-    private readonly searchAdapter;
-    readonly hasSearchAdapter: _angular_core.Signal<boolean>;
-    private readonly configContainer;
-    private readonly navContainer;
-    readonly activePanel: _angular_core.WritableSignal<ActivePanel>;
+    private menuOutsideClickListener;
+    /** Elements that must not close the menu when clicked. */
+    protected abstract outsideClickSelectors(): string[];
+    /** Extra work a skin needs on every completed navigation. */
+    protected onNavigated(): void;
     constructor();
-    readonly companyName: _angular_core.Signal<string>;
-    readonly displayLogo: _angular_core.Signal<string>;
-    readonly enableCompanyFeature: boolean;
-    toggleDarkMode(): void;
-    togglePanel(panel: ActivePanel): void;
-    private handleOutsideClick;
-    private recalculateHoveredSubmenu;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppTopbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppTopbar, "app-topbar", never, {}, {}, never, never, true, never>;
+    isOutsideClicked(event: MouseEvent): boolean;
+    hideMenu(): void;
+    blockBodyScroll(): void;
+    unblockBodyScroll(): void;
+    readonly isOverlay: _angular_core.Signal<boolean>;
+    /** Delegated so a skin that has no horizontal nav is never treated as being in it. */
+    readonly isTopbarMode: _angular_core.Signal<boolean>;
+    readonly isOverlayActive: _angular_core.Signal<boolean | undefined>;
+    readonly isMobileActive: _angular_core.Signal<boolean | undefined>;
+    /**
+     * The desktop sidebar is collapsed in place. Only meaningful for the modes that
+     * keep the sidebar in the layout flow — an overlay drawer and the horizontal nav
+     * have nothing to collapse.
+     */
+    readonly isDesktopCollapsed: _angular_core.Signal<boolean>;
 }
 
 /** Company/branch switcher displayed in top bar */
@@ -489,6 +505,100 @@ declare class AppSearchbar {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppSearchbar, "app-searchbar", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Trailing action rail of the topbar — search, theme controls and the widget menu.
+ * Skins own the bar around it; the rail itself is identical in every skin, and
+ * `display: contents` on the host keeps it a direct flex child of the bar.
+ */
+declare class AppTopbarActions {
+    private readonly appConfig;
+    private readonly document;
+    private readonly destroyRef;
+    readonly layoutService: LayoutService;
+    readonly notificationBellComponent: _angular_core.Type<unknown> | null;
+    readonly languageSelectorComponent: _angular_core.Type<unknown> | null;
+    private readonly searchAdapter;
+    private readonly configContainer;
+    private readonly _configPanelOpen;
+    readonly configPanelOpen: _angular_core.Signal<boolean>;
+    readonly hasSearchAdapter: _angular_core.Signal<boolean>;
+    readonly enableCompanyFeature: boolean;
+    constructor();
+    toggleDarkMode(): void;
+    toggleConfigPanel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppTopbarActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppTopbarActions, "app-topbar-actions", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppClassicLayout extends LayoutShellBase {
+    readonly isStatic: _angular_core.Signal<boolean>;
+    protected outsideClickSelectors(): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppClassicLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppClassicLayout, "app-classic-layout", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppSidebar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppSidebar, "app-sidebar", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppTopbar {
+    readonly layoutService: LayoutService;
+    private readonly navContainer;
+    private readonly _scrollThumb;
+    readonly scrollThumb: _angular_core.Signal<{
+        width: number;
+        offset: number;
+    }>;
+    constructor();
+    syncScrollThumb(): void;
+    /**
+     * Horizontal-nav submenus are `position: fixed`, so scrolling the nav strip leaves
+     * an open submenu behind — re-anchor it to the item it belongs to.
+     */
+    private recalculateHoveredSubmenu;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppTopbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppTopbar, "app-topbar", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppModernLayout extends LayoutShellBase {
+    private readonly content;
+    protected outsideClickSelectors(): string[];
+    /**
+     * The page scrolls inside the content card rather than the window, so the router's
+     * scroll restoration never reaches it — reset it here instead.
+     */
+    protected onNavigated(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppModernLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppModernLayout, "app-modern-layout", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppModernSidebar {
+    readonly layoutService: LayoutService;
+    /**
+     * Only the in-flow column can be collapsed from here. As an overlay or mobile
+     * drawer the sidebar is opened by the topbar button and dismissed by the mask,
+     * so a second toggle inside it would be dead weight next to the brand.
+     */
+    readonly showMenuButton: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppModernSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppModernSidebar, "app-modern-sidebar", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppModernTopbar {
+    private readonly destroyRef;
+    private readonly router;
+    readonly layoutService: LayoutService;
+    private readonly _pageTitle;
+    readonly pageTitle: _angular_core.Signal<string>;
+    /** The sidebar is a drawer (not a column) in these modes, so the topbar owns the brand. */
+    readonly showBrand: _angular_core.Signal<boolean>;
+    constructor();
+    private resolvePageTitle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppModernTopbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppModernTopbar, "app-modern-topbar", never, {}, {}, never, never, true, never>;
+}
+
 /** Filter launcher apps based on user permission codes */
 declare function filterAppsByPermissions(apps: ILauncherApp[], permissionCodes: string[]): ILauncherApp[];
 
@@ -518,5 +628,5 @@ declare const GreenTheme: ApplyThemeOptions;
 
 declare const LAYOUT_MESSAGES: Record<string, string>;
 
-export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSearchbar, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, NavyBlueTheme, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
+export { AppBrandLogo, AppClassicLayout, AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppModernLayout, AppModernSidebar, AppModernTopbar, AppProfile, AppSearchbar, AppSidebar, AppTopbar, AppTopbarActions, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, LayoutShellBase, NavyBlueTheme, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
 export type { CompanyProfile, DocumentWithViewTransition, IBranchInfo, ICompanyInfo, ILauncherApp, ILayoutAuthApi, ILayoutAuthState, IMenuItem, ISearchAdapter, ISearchSuggestion, IUserInfo, LayoutState, MenuChangeEvent, UserProfile, ViewTransition };

package/assets/layout/_main.scss

@@ -1,13 +0,0 @@
-.layout-main-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    justify-content: space-between;
-    padding: 6rem 2rem 0 2rem;
-    transition: margin-left var(--layout-section-transition-duration);
-}
-
-.layout-main {
-    flex: 1 1 auto;
-    padding-bottom: 2rem;
-}

package/assets/layout/_menu.scss

@@ -1,188 +0,0 @@
-@use 'mixins' as *;
-
-.layout-sidebar {
-    position: fixed;
-    width: 22rem;
-    height: 100vh;
-    z-index: 999;
-    overflow-y: auto;
-    user-select: none;
-    top: 4rem;
-    transition:
-        transform var(--layout-section-transition-duration),
-        left var(--layout-section-transition-duration);
-    background-color: var(--surface-overlay);
-    padding: 1rem 1.5rem;
-    border-inline-end: var(--f-sidebar-border-width) solid var(--f-content-border-color);
-    border-end-end-radius: var(--f-sidebar-radius);
-    box-shadow: var(--f-sidebar-shadow);
-}
-
-.layout-menu {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    .layout-root-menuitem {
-        >.layout-menuitem-root-text {
-            font-size: 0.857rem;
-            text-transform: uppercase;
-            font-weight: 700;
-            color: var(--text-color);
-            margin: 0.75rem 0;
-        }
-
-        >a {
-            display: none;
-        }
-    }
-
-    a {
-        user-select: none;
-
-        &.active-menuitem {
-            >.layout-submenu-toggler {
-                transform: rotate(-180deg);
-            }
-        }
-    }
-
-    li {
-        margin-top: 5px;
-    }
-
-    li.active-menuitem {
-        >a {
-            background-color: var(--f-highlight-background);
-            color: var(--f-highlight-color) !important;
-            border-radius: var(--f-menuitem-active-radius);
-            border-inline-start: var(--f-menuitem-active-border-width) solid var(--f-primary-color);
-
-            .layout-submenu-toggler {
-                transform: rotate(-180deg);
-            }
-        }
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-
-        a {
-            display: flex;
-            align-items: center;
-            position: relative;
-            outline: 0 none;
-            color: var(--text-color);
-            cursor: pointer;
-            padding: 0.50rem 1rem;
-            border-radius: var(--content-border-radius);
-            transition:
-                background-color var(--element-transition-duration),
-                box-shadow var(--element-transition-duration);
-
-            .layout-menuitem-icon {
-                margin-right: 0.5rem;
-            }
-
-            .layout-submenu-toggler {
-                font-size: 75%;
-                margin-left: auto;
-                transition: transform var(--element-transition-duration);
-            }
-
-            &.active-route {
-                font-weight: 600;
-                background-color: var(--f-highlight-background);
-                color: var(--f-highlight-color);
-                border-radius: var(--f-menuitem-active-radius);
-                border-inline-start: var(--f-menuitem-active-border-width) solid var(--f-primary-color);
-            }
-
-            &:not(.active-route):hover {
-                color: var(--f-primary-color);
-                font-weight: 600;
-            }
-        }
-
-        ul {
-            overflow: hidden;
-            border-radius: var(--content-border-radius);
-
-            li {
-                a {
-                    margin-left: 1rem;
-                }
-
-                li {
-                    a {
-                        margin-left: 2rem;
-                    }
-
-                    li {
-                        a {
-                            margin-left: 2.5rem;
-                        }
-
-                        li {
-                            a {
-                                margin-left: 3rem;
-                            }
-
-                            li {
-                                a {
-                                    margin-left: 3.5rem;
-                                }
-
-                                li {
-                                    a {
-                                        margin-left: 4rem;
-                                    }
-
-                                    li {
-                                        a {
-                                            margin-left: 4.5rem;
-                                        }
-
-                                        li {
-                                            a {
-                                                margin-left: 5rem;
-                                            }
-
-                                            li {
-                                                a {
-                                                    margin-left: 5.5rem;
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.layout-submenu-enter-from,
-.layout-submenu-leave-to {
-    max-height: 0;
-}
-
-.layout-submenu-enter-to,
-.layout-submenu-leave-from {
-    max-height: 1000px;
-}
-
-.layout-submenu-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.layout-submenu-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}

package/assets/layout/_responsive.scss

@@ -1,128 +0,0 @@
-@media screen and (min-width: 1960px) {
-    .layout-main,
-    .landing-wrapper {
-        width: 1504px;
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-}
-
-@media (min-width: 992px) {
-    .layout-wrapper {
-        &.layout-overlay {
-            .layout-main-container {
-                margin-left: 0;
-                padding-left: 2rem;
-            }
-
-            .layout-sidebar {
-                transform: translateX(-100%);
-                left: 0;
-                top: 0;
-                height: 100vh;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-                border-right: 1px solid var(--surface-border);
-                transition:
-                    transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
-                    left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
-                box-shadow:
-                    0px 3px 5px rgba(0, 0, 0, 0.02),
-                    0px 0px 2px rgba(0, 0, 0, 0.05),
-                    0px 1px 4px rgba(0, 0, 0, 0.08);
-            }
-
-            &.layout-overlay-active {
-                .layout-sidebar {
-                    transform: translateX(0);
-                }
-            }
-        }
-
-        &.layout-static {
-            .layout-main-container {
-                margin-left: 22rem;
-            }
-
-            &.layout-static-inactive {
-                .layout-sidebar {
-                    transform: translateX(-100%);
-                    left: 0;
-                }
-
-                .layout-main-container {
-                    margin-left: 0;
-                    padding-left: 2rem;
-                }
-            }
-        }
-
-        &.layout-topbar-mode {
-            .layout-sidebar {
-                display: none;
-            }
-
-            .layout-main-container {
-                margin-left: 0;
-                padding-left: 2rem;
-                padding-top: 6rem;
-            }
-
-            &.layout-topbar-nav-hidden {
-                .layout-main-container {
-                    padding-top: 4rem;
-                }
-            }
-        }
-
-        .layout-mask {
-            display: none;
-        }
-    }
-}
-
-@media (max-width: 991px) {
-    .blocked-scroll {
-        overflow: hidden;
-    }
-
-    .layout-wrapper {
-        .layout-main-container {
-            margin-left: 0;
-            padding-left: 2rem;
-        }
-
-        .layout-sidebar {
-            transform: translateX(-100%);
-            left: 0;
-            top: 0;
-            height: 100vh;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            transition:
-                transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
-                left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
-        }
-
-        .layout-mask {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 998;
-            width: 100%;
-            height: 100%;
-            background-color: var(--maskbg);
-        }
-
-        &.layout-mobile-active {
-            .layout-sidebar {
-                transform: translateX(0);
-            }
-
-            .layout-mask {
-                display: block;
-            }
-        }
-    }
-}