侧边栏折叠需用js状态驱动而非纯tailwind类，通过usestate控制iscollapsed状态，同步切换宽度（w-64/w-20）与子菜单显隐，并确保图标固定尺寸、按钮可访问、响应式逻辑用matchmedia而非断点硬切。
侧边栏折叠不是靠 Tailwind 自带的 utility 类直接实现的，它本质是 DOM 结构切换 + 样式响应，hidden、w-64、w-20 这些类只是“表现层”，真正控制折叠逻辑得靠 JS 状态驱动。
用 useState 控制折叠状态（React 场景）
折叠行为本质是「宽度切换」和「子菜单显隐」两个动作同步发生。不能只改宽度，否则图标和文字错位、点击区域丢失、可访问性受损。
- 定义状态：
const [isCollapsed, setIsCollapsed] = useState(false) - 侧边栏根容器加条件 class：
className={`transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'}`} - 每个菜单项的
span文字包裹层需配合{!isCollapsed && <span>仪表盘</span>}，避免占位空白 - 图标建议统一用固定宽高（如
flex-shrink-0 w-5 h-5），防止折叠时图标被拉伸或换行
group + group-hover 无法替代真实折叠逻辑
有人尝试用 group 搭配 group-hover:scale-110 或 group-hover:w-64 做“悬停展开”，这在后台系统里是反模式：移动端没 hover、键盘用户无法触发、焦点管理混乱、与折叠按钮状态不同步。
-
group-hover只适合辅助动效（比如 hover 高亮当前菜单项），不能作为主折叠机制 - 折叠按钮本身必须是可聚焦、可回车触发的
button，且要同步更新aria-expanded - 若强行用 hover 实现，Safari 下偶尔会因 pointer-events 丢失导致状态卡死
响应式折叠要避开 md:hidden 这类断点硬切
后台系统常见需求是「桌面端可折叠，移动端始终收起」，但直接写 md:hidden lg:w-20 lg:hover:w-64 会导致在 iPad 横屏等中间尺寸上行为不可控。
- 优先用 JS 判断
window.matchMedia('(max-width: 768px)')，在小屏下禁用折叠按钮并强制isCollapsed = true - Tailwind 的响应式前缀只用于静态布局适配，比如
lg:w-64 md:w-20 sm:w-16，不能代替运行时状态 - 折叠后若还显示二级菜单，记得给
ul加max-h-0 overflow-hidden和transition-max-h（需自定义 transition，Tailwind 默认不支持max-height过渡）
最易被忽略的是 focus outline 和键盘导航——折叠后图标按钮必须能 Tab 到，展开的菜单项要按顺序可聚焦，且不能让屏幕阅读器读出隐藏文字。这些没法靠 class 组合解决，得靠 tabIndex、aria-controls 和手动 focus 管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
