ダッシュボード
プロジェクトの概要
アクティブタスク
24
完了タスク
156
チームメンバー
8
melta UI デザインシステムのサイドバーコンポーネント。全バリエーションのデモ。
3ゾーン構成: Header / Navigation / Footer。ナビグループ・バッジ付き。
プロジェクトの概要
アクティブタスク
24
完了タスク
156
チームメンバー
8
アイコンのみ表示。ツールチップでテキスト補完。タブレット幅やユーザー設定で使用。
コンパクトサイドバーはコンテンツ領域を最大化します。各アイコンには aria-label と title が必須です。
トグルボタンでサイドバー幅をアニメーション切り替え。
サイドバー下部のボタンで切り替えを試してください。w-64 ↔ w-16 のアニメーション遷移（300ms）。
ハンバーガーメニューからスライドイン。オーバーレイ・Escape・閉じるボタンで閉じる。
ハンバーガーボタンをクリックしてDrawerを開いてください。
アクティブタスク
24
完了タスク
156
Active / Default / Hover / Focus / Disabled の全状態。
ブラウザ幅を変えて確認。lg: 以上で固定表示、それ未満でDrawer化。
ブラウザの幅を 1024px 未満にするとモバイルヘッダー + Drawerに切り替わります。
| 幅（標準） | w-64 (256px) |
| 幅（コンパクト） | w-16 (64px) |
| 背景 | bg-white |
| ボーダー | border-r border-slate-200 |
| 構造 | flex flex-col h-screen |
| レイアウト | flex items-center gap-3 |
| Padding | px-4 py-2.5 |
| テキスト | text-sm font-medium |
| 角丸 | rounded-lg |
| アイコン | w-5 h-5 flex-shrink-0 |
| Active | text-primary-600 bg-primary-50 |
| Default | text-body hover:bg-gray-50 |
| Focus | focus-visible:ring-2 ring-primary-500/50 |
| Disabled | text-slate-400 cursor-not-allowed |
| Desktop (lg:) | 固定表示 w-64 |
| Tablet (md:) | コンパクト w-16 |
| Mobile | Drawer（スライドイン） |
| Drawer z-index | z-50 + overlay z-40 |