サイドバー・ドロワーナビゲーション
折りたたみ対応のサイドバーとオーバーレイ型ドロワーを、3つのライブラリで比較します。 各デモではサイドバーの折りたたみ（アイコンのみ）とドロワー（オーバーレイ）の2パターンを操作できます。
Mantine
NavLink コンポーネントでグループ化されたナビゲーションを構築。Drawer コンポーネントでオーバーレイ型のモバイルナビゲーションも提供。Badge との組み合わせで通知数の表示も容易。
NavLinkDrawerBadgeProvider必須
読み込み中...
tsx
'use client';
import { MantineProvider, NavLink } from '@mantine/core';
import { useState } from 'react';
import '@mantine/core/styles.css';
const navItems = [
{ label: 'ダッシュボード', icon: '📊' },
{ label: 'ユーザー管理', icon: '👥' },
{ label: '設定', icon: '⚙️' },
];
export function MantineSidebarDemo() {
const [active, setActive] = useState('ダッシュボード');
return (
<MantineProvider>
<div style={{ display: 'flex', height: '100vh' }}>
<nav style={{ width: 220, background: '#f8fafc', borderRight: '1px solid #e2e8f0', padding: 16 }}>
{navItems.map((item) => (
<NavLink
key={item.label}
label={item.label}
leftSection={<span>{item.icon}</span>}
active={active === item.label}
onClick={() => setActive(item.label)}
/>
))}
</nav>
<main style={{ flex: 1, padding: 24 }}>メインコンテンツ</main>
</div>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったサイドバー・ドロワーナビゲーションUIを実装してください。 - 使用ライブラリ: @mantine/core の NavLink / Drawer / Badge / AppShell、MantineProvider必須 - NavLink の active / variant props でアクティブ項目をハイライトする - NavLink に leftSection / rightSection を使ってアイコンとバッジ（通知数）を配置する - セクションラベルで項目をグループ分けして表示する - Drawer コンポーネントでオーバーレイ型のモバイルナビゲーションを実装し、背景クリックで閉じる - CSS transition でサイドバーの折りたたみ（アイコンのみ表示）アニメーションを実装する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Shadcn/ui | Ant Design |
|---|---|---|---|
| サイドバー | NavLink 組み合わせ | Tailwind 自前実装 | Layout.Sider + Menu |
| ドロワー | ✅ Drawer コンポーネント | ✅ Sheet（自前実装） | ✅ Drawer コンポーネント |
| 折りたたみ | ✅ 手動制御 | ✅ CSS transition | ✅ collapsible prop |
| グループ分け | ✅ セクション手動 | ✅ 自前マークアップ | ✅ Menu type=group |
| バッジ通知 | ✅ Badge コンポーネント | ✅ 自前スタイル | ✅ Badge コンポーネント |
| アニメーション | CSS transition | CSS transition / keyframes | CSS transition（組み込み） |
| カスタマイズ性 | 中（style上書き） | 高（完全自前） | 中（token + CSS） |
選択のポイント
- Mantine — NavLink のactive/variant 切り替えが便利で、Drawer も Provider 内で簡単に呼び出せる。サイドバーとドロワーを統一的に管理したい場合に最適。
- Shadcn/ui — Provider不要でバンドルサイズが最小。Tailwind CSS との親和性が高く、アニメーションやレイアウトを完全に制御したい場合に最適。既存のデザインシステムに合わせやすい。
- Ant Design — Menu の grouping やネスト構造を宣言的に記述できる。Sider の collapsible 制御が組み込みで、管理画面やエンタープライズ向けに安定した選択肢。