侧边栏必须用 nav + flex 实现收缩，禁用 display: none；需保留语义与可访问性，设置 aria-label、flex-shrink: 0、width/opacity 动画及 inline-flex 图标按钮。
侧边栏必须用 nav + flex，别用 display: none 隐藏
收缩不是“删掉”，而是视觉隐藏但保留语义和可访问性。用 display: none 会让键盘 Tab 直接跳过整个导航区，屏幕阅读器也读不到——这违反 WCAG 基本要求。
正确做法是保留 DOM 结构，靠 CSS 控制显隐：
-
nav必须带aria-label，比如<nav aria-label="主菜单"></nav> - 收缩时用
width: 60px+overflow: hidden+transition: width 0.3s ease - 文字隐藏用
text-indent: -9999px或opacity: 0（配合pointer-events: none），不能靠visibility: hidden后再加height: 0—— 这会破坏焦点流 - 移动端小屏建议改用
flex-direction: column堆叠，而不是强行收缩
小图标横排布局优先用 inline-flex，别用 float 或 table
浮动（float）在现代布局中已淘汰，它会导致父容器塌陷、换行错位、响应式失效；table 更是语义错误且难以维护。
图标按钮统一用 button 包裹 SVG 或 img，并设为 display: inline-flex：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
button必须带type="button"，避免表单提交干扰 - 图标子元素加
aria-hidden="true"（SVG）或alt=""（img），防止读屏重复播报 - 横向间距用
gap，比margin-right更干净，不需处理末项 - 禁用背景图实现图标——状态切换（如激活/悬停）时无法独立控制颜色或尺寸
transition 宽度变化必须配 flex-shrink: 0，否则会抖动
当 nav 在 flex 容器里收缩时，如果没设 flex-shrink: 0，浏览器可能在动画过程中重新计算剩余空间，导致主内容区域“抽搐”或图标错位。
关键样式组合要写全：
- 外层容器：
display: flex+min-height: 100vh -
nav：flex: 0 0 240px（展开态）→ 收缩态改为flex: 0 0 60px - 必须显式写
flex-shrink: 0，不能只靠flex: 0 0 ...—— 某些旧版 Safari 对简写解析不一致 - 动画属性只写
transition: width 0.3s ease, flex-basis 0.3s ease，避免过渡flex-grow引发不可控行为
收缩后图标对齐靠 align-items: center，不是 line-height 或 padding
用 line-height 垂直居中只对单行文本有效，一旦图标尺寸变化或字体加载延迟，就会偏移；padding 手动调更难适配不同设备像素比。
真正稳的方案是让按钮本身成为弹性容器：
button { display: inline-flex; align-items: center; justify-content: center; }- 图标和文字都作为子元素，高度自动对齐
- 文字在收缩态下用
span包裹，并加opacity: 0+transform: translateX(-10px)，比单纯display: none更利于动画衔接 - 注意 SVG 要设
width/height，否则在缩放页面时可能失比例
nav 加 flex-shrink: 0，或者用 display: none 把整个导航干掉了。 
