ダッシュボードDashboardExperimental
サイドバーとヘッダー付きの標準ダッシュボードレイアウトです。
プレビュー
状態とバリエーション
左のレールは collapsible・defaultCollapsed・collapsed の3つで畳み方が決まり、sidebarHeader と sidebarFooter で上下に固定する枠が決まります。行そのものは sidebar に渡します。
畳んだ状態で開く
defaultCollapsed を渡すと、レールが記号だけの細い形で始まります。文字は指を置いたときに出ます。本文を広く使いたい画面向けです。
概要
今月の売上
452万円
契約数
2,350
畳めないレール
collapsible={false} にすると畳む操作が消え、レールは開いたままになります。行き先が少なく、迷わせたくない画面で使います。
概要
今月の売上
452万円
契約数
2,350
上下に固定する枠
sidebarHeader と sidebarFooter は行の上下に貼り付きます。上は所属の切り替え、下は自分のアカウントを置く場所です。
概要
今月の売上
452万円
契約数
2,350
View as a full app
/patterns/dashboard wraps the template in a working multi-page mini-site with mock state.
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| header | React.ReactNode | - | Content for the top header section. On small screens the button that opens the navigation sheet sits to its left. |
| sidebar | React.ReactNode | - | The navigation rows themselves — normally SidebarItems. The template owns the provider, the collapsible desktop rail, and the small-screen sheet, so pass rows rather than a sidebar of your own. |
| sidebarHeader | React.ReactNode | - | Brand or workspace switcher, pinned above the rows. |
| sidebarFooter | React.ReactNode | - | Account menu or similar, pinned below the rows. |
| collapsible | boolean | true | Show the collapse control on the desktop rail. Collapsed rows become icon-only with their label in a tooltip. |
| defaultCollapsed | boolean | - | Initial collapsed state when uncontrolled. |
| collapsed | boolean | - | Controlled collapsed state of the desktop rail. |
| onCollapsedChange | (collapsed: boolean) => void | - | Called when the rail is collapsed or expanded. |
| navLabel | string | - | Accessible name for the nav region, its open control, and the sheet. Defaults to the active locale's wording. |
| navOpen | boolean | - | Controlled open state of the small-screen navigation sheet. |
| onNavOpenChange | (open: boolean) => void | - | Called when the navigation sheet opens or closes. |
| children | React.ReactNode | - | The main content area of the dashboard. It scrolls independently; the shell itself is viewport height. |
| className | string | - | Additional classes for the root container. Override the height here when embedding the template in a fixed-size box. |
Usage
"use client";
import { DashboardTemplate, SidebarItem } from "@gunjo/ui";
import { IconLayoutDashboard as LayoutDashboard, IconSettings as Settings, IconUser as User } from "@tabler/icons-react";
export function DashboardPage() {
return (
<DashboardTemplate
header={
<div className="flex h-16 items-center px-6">
<div className="font-bold">Dashboard</div>
</div>
}
sidebarHeader={<div className="font-semibold">Acme</div>}
// Pass the rows themselves. The template supplies the provider, the
// collapsible rail, and the sheet that opens the same rows on phones.
sidebar={
<>
<SidebarItem icon={<LayoutDashboard size={20} />} isActive={true} onClick={() => {}} id="overview" label="Overview" />
<SidebarItem icon={<User size={20} />} isActive={false} onClick={() => {}} id="customers" label="Customers" />
<SidebarItem icon={<Settings size={20} />} isActive={false} onClick={() => {}} id="settings" label="Settings" />
</>
}
sidebarFooter={<div className="text-sm text-muted-foreground">hikaby</div>}
>
<h2 className="text-3xl font-bold">Overview</h2>
{/* Dashboard Content */}
</DashboardTemplate>
)
}