MuseMVP Docs
Theme and Layout

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 valueComponentFile
defaultAppDefaultLayoutsrc/modules/layout/default/index.tsx
fortressAppFortressLayoutsrc/modules/layout/fortress/index.tsx
sidebarBackward-compatible alias to defaultMapped 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

LayoutCharacteristics
defaultUses shadcn sidebar primitives (SidebarProvider, Sidebar, collapsible behavior), profile dropdown, and classic dashboard shell
fortressUses a custom visual shell with fixed desktop aside, mobile quick actions, and dedicated LogoutButton component

Main files:

  • src/modules/layout/default/components/AppSidebar.tsx
  • src/modules/layout/default/components/ProfileDropdown.tsx
  • src/modules/layout/fortress/index.tsx
  • src/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.