用途：为 SaaS 仪表盘构建现代化、可折叠的侧边栏导航，遵循 ChatGPT/Notion 风格设计，基于 shadcn/ui 的 Sidebar 组件体系。
主要能力：覆盖图标模式居中、悬浮切换展开按钮、自动 tooltip、键盘快捷键、移动端 Sheet 抽屉、状态持久化与加载骨架。桌面端侧边栏由两个 div 组成（占位 div 与固定 div），二者宽度同步过渡，保证主内容不被遮挡。宽度由 CSS 变量控制：展开 16rem（256px）、折叠 3rem（48px）、移动端 18rem（288px）。状态通过 useSidebar() 获取，包含 state、open、setOpen、openMobile、setOpenMobile、isMobile 与 toggleSidebar，无需向下传递 collapsed 属性。外层 div 通过 data-state、data-collapsible、data-variant、data-side 等属性配合 Tailwind group 选择器实现样式联动。
必要用法：先运行 npx shadcn@latest add sidebar tooltip avatar popover collapsible separator skeleton sheet 生成组件。菜单按钮使用 SidebarMenuButton 的 tooltip 属性即可自动显示提示，无需手动包裹；折叠时通过 group-data-[collapsible=icon] 规则强制按钮为 32×32 并居中图标，同时隐藏标签、子菜单与徽标。header 中折叠态悬浮时用 ExpandButton 替换组织头像，展开态显示 CollapseToggle；两者均使用 PanelLeftOpen 图标，折叠按钮通过 rotate-180 复用。子菜单折叠时自动隐藏，分组标签用负外边距与透明度淡出而非 display:none，以保留平滑过渡。底部组件（用量、用户行）采用提前返回模式，在折叠时只渲染居中图标与 tooltip。
适用场景：带侧边栏导航的 SaaS 仪表盘、可折叠成图标模式的侧边栏、含移动端抽屉覆盖层的响应式布局。
限制：资料未提供该技能的具体收费、价格、平台兼容细节与官方支持范围；未说明与 Next.js 之外框架的适配方式。部分代码片段在资料中被截断，完整实现需参照组件源码。