Card Sidebar Layout

Sidebar with a muted background and card-style content area. Provides strong visual separation between navigation and content.

Metronic Demo: Layouts 4, 6, 8

Usage

<MetronicLayout
  variant="card-sidebar"
  menu={menu}
  sidebarWidth={290}
  logo={<Logo />}
  headerUser={{ name: 'Jane Doe' }}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌──────────┬──────────────────────────────────┐
│ Sidebar  │ Header                           │
│ (290px)  ├──────────────────────────────────┤
│          │ ┌────────────────────────────┐   │
│  Logo    │ │                            │   │
│  Menu    │ │  Content Card (rounded)    │   │
│          │ │                            │   │
│          │ │                            │   │
│          │ └────────────────────────────┘   │
│          │          muted background        │
└──────────┴──────────────────────────────────┘

Features

Configurable sidebar width (default 290px)
Muted slate background behind content
Content rendered in a white card with rounded corners and shadow
Covers three Metronic demo layouts (4, 6, 8) with different sidebar widths

Variants

Use sidebarWidth to match different demo layouts:

Demo	Width	Style
Layout 4	290px	Standard card sidebar
Layout 6	260px	Narrow card sidebar
Layout 8	300px	Wide card sidebar

Mini Sidebar Content Sidebar