侧边栏收缩布局用 Flex 实现，核心是类名切换控制 width + transition 动画，主内容区设 flex: 1 和 min-width: 0，侧边栏设初始 width、min-width: 0 且不设 flex-shrink: 0；收缩时通过 .sidebar-collapsed 切换 width 和 overflow，图标保留、文字 opacity/width 归零；小屏下媒体查询隐藏侧边栏，汉堡菜单以 fixed 覆盖层唤出。

侧边栏收缩布局用 Flex 实现，核心是利用 flex 的弹性行为 + 类名切换控制宽度，配合 CSS 过渡实现平滑收放效果，无需 JS 计算尺寸。

基础结构：用 flex-direction: row 搭建主-侧布局

容器设为 display: flex，主内容区用 flex: 1 自适应剩余空间，侧边栏设初始宽度（如 width: 260px）并允许收缩：

• 侧边栏不写 flex: 0 0 auto（默认即可），但需加 min-width: 0 防止内容撑宽
• 主内容区必须设 min-width: 0，否则文字或长单词可能破坏收缩逻辑
• 避免在侧边栏上直接写 flex-basis 和 flex-shrink: 0，否则无法压缩

收缩控制：用 class 切换触发宽度变化

定义一个 .sidebar-collapsed 类，只改侧边栏的 width 和 overflow，不碰 flex 属性：

• .sidebar { width: 260px; transition: width 0.3s ease; }
• .sidebar-collapsed { width: 60px; overflow: hidden; }
• JS 只负责增删该 class，不操作 style 或 offsetWidth

图标与文字的响应式显示

侧边栏内元素根据宽度自动显隐，不用媒体查询：

• 文字用 span 包裹，初始 opacity: 1; width: auto;
• 收缩时加 .sidebar-collapsed span { opacity: 0; width: 0; }，再配 overflow: hidden
• 图标保持显示，可加 flex-shrink: 0 防被压缩变形

适配移动端：折叠后隐藏侧边栏

小屏下直接隐藏侧边栏，用汉堡菜单唤出：

• 媒体查询中设 @media (max-width: 768px) { .sidebar { display: none; } }
• 点击按钮时给 body 加 sidebar-open 类，用 position: fixed 覆盖层展示
• 此时 flex 布局退化为主内容区占满全屏，逻辑更清晰