MuseMVP

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/*. Values not present in the map silently fall back to default.

Supported Layout Types

`layoutType` value	Component	File
`default`	`AppDefaultLayout`	`src/modules/layout/default/index.tsx`
`sidebar`	Backward-compatible alias to `default`	Mapped in `src/app/(saas-page)/app/(account)/layout.tsx`

The template currently ships with only the built-in default layout (sidebar is a backward-compatible alias); if you need a different shell, add your own variant as described in the Add a New Layout Variant section below.

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. With only the built-in layout available, meaningful values are default (or its alias sidebar); a custom variant such as zen becomes valid once you register it as described below.

// src/config/index.ts
ui: {
  saas: {
    layoutType: "default", // or a custom variant you registered, e.g. "zen"
  },
}

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.

Layout Structure

Layout	Characteristics
`default`	Uses shadcn sidebar primitives (`SidebarProvider`, `Sidebar`, collapsible behavior), profile dropdown, and classic dashboard shell

Main files:

src/modules/layout/default/components/AppSidebar.tsx
src/modules/layout/default/components/ProfileDropdown.tsx

Add a New Layout Variant

If default does not match the shell you need, adding a layout variant is the supported extension path.

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. Remember that unregistered layoutType values silently fall back to default.

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.

Theme Modes and Tokens - Theme and token customization
Application Configuration - Full config reference

App Layout Customization