Dashboard Overview
Welcome back, Jane. Here is what’s happening today.
Total Revenue
$45,231
Active Users
2,410
New Orders
142
管理画面やダッシュボードでよく見られる、テキスト付きのフルサイズ表示とアイコンのみのコンパクト表示を切り替えられるサイドバーナビゲーションです。コンテンツエリアの表示領域を最大化したい場合に最適です。
Welcome back, Jane. Here is what’s happening today.
Total Revenue
$45,231
Active Users
2,410
New Orders
142
opacity）、max-width を組み合わせることで、テキストがなめらかに消えたり現れたりする自然な動きを実現しています。max-w-0 と overflow-hidden を組み合わせることで、折りたたみ時にテキストが改行されてレイアウトが崩れるのを防いでいます。w-64（展開時）や w-20（折りたたみ時）を変更することで、好みのサイズに調整可能です。bg-blue-600 や text-blue-700 のユーティリティクラスを一括置換することで、ブランドカラーに合わせたデザインに適用できます。<div className="flex h-screen bg-slate-50 font-sans overflow-hidden">
{/* Sidebar */}
<aside
className={`bg-white border-r border-slate-200 flex flex-col transition-all duration-300 ease-in-out relative z-10 ${
isCollapsed ? 'w-20' : 'w-64'
}`}
>
{/* Header */}
<div className="h-16 flex items-center px-4 border-b border-slate-100 shrink-0">
<div className="flex items-center gap-3 overflow-hidden whitespace-nowrap">
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shrink-0 shadow-sm shadow-blue-200">
<Hexagon className="w-6 h-6 text-white" />
</div>
<span
className={`font-bold text-slate-800 text-xl transition-all duration-300 overflow-hidden ${
isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
}`}
>
DashUI
</span>
</div>
</div>
{/* Navigation */}
<nav className="flex-1 py-6 px-3 space-y-2 overflow-y-auto overflow-x-hidden">
{navItems.map((item, index) => (
<a
key={index}
href="#"
className={`flex items-center gap-3 px-3 py-3 rounded-xl transition-colors group relative ${
item.active
? 'text-blue-700 bg-blue-50 hover:bg-blue-100'
: 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
}`}
>
<item.icon className="w-6 h-6 shrink-0" />
<span
className={`font-semibold whitespace-nowrap transition-all duration-300 flex-1 text-sm overflow-hidden ${
isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
}`}
>
{item.label}
</span>
{/* バッジ表示（展開時のみ） */}
{!isCollapsed && item.badge && (
<span className="bg-blue-100 text-blue-700 py-0.5 px-2 rounded-full text-xs font-bold whitespace-nowrap">
{item.badge}
</span>
)}
{/* ツールチップ（折りたたみ時のみホバーで表示） */}
{isCollapsed && (
<div className="absolute left-14 hidden group-hover:block bg-slate-800 text-white text-xs px-2.5 py-1.5 rounded-md shadow-lg z-20 whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 group-hover:opacity-100">
{item.label}
</div>
)}
</a>
))}
</nav>
{/* Footer Profile */}
<div className="p-4 border-t border-slate-100 shrink-0">
<a href="#" className="flex items-center gap-3 hover:bg-slate-50 p-2 -m-2 rounded-xl transition-colors">
<img
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
alt="User Avatar"
className="w-10 h-10 rounded-full shrink-0 border border-slate-200 object-cover"
/>
<div
className={`flex-1 min-w-0 transition-all duration-300 overflow-hidden ${
isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
}`}
>
<p className="text-sm font-semibold text-slate-900 truncate">Jane Doe</p>
<p className="text-xs text-slate-500 truncate">Admin</p>
</div>
</a>
</div>
</aside>
{/* Toggle Button */}
<button
onClick={() => setIsCollapsed(!isCollapsed)}
className={`absolute top-6 z-20 cursor-pointer bg-white border border-slate-200 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded-full p-1.5 shadow-sm transition-all duration-300 ${
isCollapsed ? 'left-[4.2rem]' : 'left-[15rem]'
}`}
aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
>
<ChevronLeft className={`w-4 h-4 transition-transform duration-300 ${isCollapsed ? 'rotate-180' : ''}`} />
</button>
{/* Main Content Area (Example) */}
<main className="flex-1 p-8 overflow-y-auto">
<h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
<p className="text-slate-500 mt-1">Select an item from the sidebar.</p>
</main>
</div>
);
}transition-all や max-w-0 のアニメーションも、すべてのモダンブラウザでなめらかにレンダリングされます。