Dashboard Layout

Overview

The DashboardLayout recipe provides a full-page dashboard shell with a desktop sidebar, mobile drawer navigation, optional header, and a scrollable content area inside a Container.

Usage

import { DashboardLayout } from '@/recipes/dashboard-layout';
import { SidebarNavigation } from '@/recipes/sidebar-navigation';
import { Navbar } from '@/recipes/navbar';

<DashboardLayout
  sidebar={<SidebarNavigation groups={navGroups} currentPath="/" />}
  header={<Navbar logo={<span>MyApp</span>} links={links} />}
>
  <DashboardStats stats={stats} />
</DashboardLayout>

API Reference

Responsive Behavior

• Desktop (lg+): Sidebar visible as a fixed aside panel
• Mobile: Sidebar collapses into a Drawer, triggered via hamburger button

Related Recipes

• Sidebar Navigation — Sidebar content
• Navbar — Header content
• Dashboard Stats — Stat cards for the content area