App Layout Customization
Switch and extend account/admin layouts using config.ui.saas.layoutType and src/modules/layout implementations.
MuseMVP supports multiple app layouts for the authenticated SaaS area (/app/*). Layout selection is driven by config.ui.saas.layoutType.
Layout Entry Point
Layout routing happens in:
src/app/(saas-page)/app/(account)/layout.tsx
It reads config.ui.saas.layoutType and maps the value to a layout component in src/modules/layout/*.
Supported Layout Types
layoutType value | Component | File |
|---|---|---|
default | AppDefaultLayout | src/modules/layout/default/index.tsx |
fortress | AppFortressLayout | src/modules/layout/fortress/index.tsx |
sidebar | Backward-compatible alias to default | Mapped in src/app/(saas-page)/app/(account)/layout.tsx |
Backward compatibility
sidebar is kept as a compatibility alias. New projects should use default explicitly.
Quick Switch
Update layout type in config
Edit src/config/index.ts.
// src/config/index.ts
ui: {
saas: {
layoutType: "fortress",
},
}Verify type safety
Allowed values are defined by SaasLayoutType in src/config/types.ts.
Restart and validate pages
Open /app, /app/settings/*, and /app/admin/* to confirm navigation and spacing still match your product requirements.
Structural Differences
| Layout | Characteristics |
|---|---|
default | Uses shadcn sidebar primitives (SidebarProvider, Sidebar, collapsible behavior), profile dropdown, and classic dashboard shell |
fortress | Uses a custom visual shell with fixed desktop aside, mobile quick actions, and dedicated LogoutButton component |
Main files:
src/modules/layout/default/components/AppSidebar.tsxsrc/modules/layout/default/components/ProfileDropdown.tsxsrc/modules/layout/fortress/index.tsxsrc/modules/layout/fortress/components/LogoutButton.tsx
Add a New Layout Variant
Create a new folder, for example src/modules/layout/zen/index.tsx, and implement a layout component receiving user props.
Register the new layout in src/app/(saas-page)/app/(account)/layout.tsx map.
Extend SaasLayoutType in src/config/types.ts and set config.ui.saas.layoutType to your new value.
Keep behavior parity
When adding a new layout, keep required account/admin routes reachable and preserve sign-out/session-expiration behavior.
Related Docs
- Theme Modes and Tokens - Theme and token customization
- Application Configuration - Full config reference