管理画面やダッシュボードでよく見られる、テキスト付きのフルサイズ表示とアイコンのみのコンパクト表示を切り替えられるサイドバーナビゲーションです。コンテンツエリアの表示領域を最大化したい場合に最適です。

プレビュー (Preview)

Dashboard Overview

Welcome back, Jane. Here is what’s happening today.

Total Revenue

$45,231

Active Users

2,410

New Orders

142

Recent Activity

ユースケースと特徴 (Use Cases & Features)

ダッシュボード＆管理画面: ユーザーがメインコンテンツ（グラフやデータテーブル等）に集中できるよう、必要に応じてナビゲーションを折りたためる設計です。
ツールチップによる補完: アイコンのみのコンパクトな状態になった際も、ホバー時にツールチップを表示することでアクセシビリティと使いやすさを担保しています。
スムーズなアニメーション: 幅や透明度（opacity）、max-width を組み合わせることで、テキストがなめらかに消えたり現れたりする自然な動きを実現しています。

デザインとUXのポイント (Design & UX)

テキストのオーバーフロー対策: max-w-0 と overflow-hidden を組み合わせることで、折りたたみ時にテキストが改行されてレイアウトが崩れるのを防いでいます。
アクティブ状態の視覚的強調: 現在選択されているメニュー項目は背景色と文字色を青系にすることで、現在の位置を直感的に伝えます。
視線の誘導: 開閉用のトグルボタンは、サイドバーの境界線上に配置することで「ここを押せば動く」というアフォーダンスを高めています。

カスタマイズ方法 (Customization Guide)

サイドバーの幅を変更する: 実装コード側の w-64（展開時）や w-20（折りたたみ時）を変更することで、好みのサイズに調整可能です。
テーマカラーの変更: bg-blue-600 や text-blue-700 のユーティリティクラスを一括置換することで、ブランドカラーに合わせたデザインに適用できます。

実装コード (Implementation)

<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>
);
}

ブラウザ対応状況 (Browser Support)

モダンブラウザ（Chrome, Firefox, Safari, Edge）の最新バージョンで正常に動作します。
transition-all や max-w-0 のアニメーションも、すべてのモダンブラウザでなめらかにレンダリングされます。