侧边栏导航允许您在带有文本的全尺寸显示和仅带有图标的紧凑显示之间切换，这通常出现在管理屏幕和仪表板上。如果您想最大化内容区域的显示区域，这是理想的选择。

预览

Dashboard Overview

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

Total Revenue

$45,231

Active Users

2,410

New Orders

142

Recent Activity

用例和功能

仪表板和管理屏幕：旨在让用户通过根据需要折叠导航来专注于主要内容（图表、数据表等）。
使用工具提示完成：即使处于只有图标的紧凑状态，通过悬停时显示工具提示也可确保可访问性和易用性。
平滑动画：通过结合宽度、透明度（opacity）和max-width，我们实现了文本平滑消失和出现的自然运动。

设计和用户体验（Design & UX）的要点

防止文本溢出：结合 max-w-0 和 overflow-hidden 可防止文本在折叠时换行并破坏布局。
视觉上突出显示活动状态：当前选定的菜单项具有蓝色背景和文本颜色，以直观地传达当前位置。
引导眼睛：用于打开和关闭的切换按钮放置在侧边栏的边框上，以增加“按此处移动”的可见性。

如何定制（定制指南）

更改侧边栏的宽度：您可以通过更改实现代码侧的“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>

            {/* Badge display (only when expanded) */}
            {!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>
            )}

            {/* Tooltip (displayed on hover only when collapsed) */}
            {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 className="flex-1 p-8 Overflow-y-auto">
      <h1 className="text-2xl font-bold text-slate-900">仪表板</h1>
      <p className="text-slate-500 mt-1">从侧边栏中选择一个项目。</p>
    </主要>

</div>
）；
}

浏览器支持

与最新版本的现代浏览器（Chrome、Firefox、Safari、Edge）配合良好。
transition-all 和 max-w-0 动画也可以在所有现代浏览器中顺利渲染。