# docs 站窄屏抽屉导航 — 设计与落地记录 > 2026-08-11。owner 当日提出「顶栏有问题，宽度不够时可以做成移动端的导航样式」， > brainstorm 三问定范围/断点/取舍后**当日实现并验收**，故本文件是设计 + 落地合一的记录， > 不是待执行的 spec。实测数字与故障排查见 [STATUS-CHANGELOG](../../internal/STATUS-CHANGELOG.md) 同日条目。 ## 1. 问题（实测，不是观感） owner 的原话只指向顶栏，但量完发现顶栏只是小头： | 视口 | 顶栏 | 侧栏 | 正文标题距顶 | |---|---|---|---| | 390（iPhone 13）| 311px（且 `position: sticky`）| 1781px / 33 链接 | **2177px ≈ 2.6 屏** | | 680 | 265px | 1781px | 2131px ≈ 2.5 屏 | | 1000 | 105px | 1781px | 1979px ≈ 2.3 屏 | 顶栏占那 2131px 的 **12%**，侧栏占 **84%**。成因是两个既有断点各塌一半：`720` 让顶栏三块 各占满宽堆叠，`1100` 让 `.canonical-shell` 变单列、`.docs-sidebar` 变 `static` + `max-height: none` （整份组件列表平铺到正文上方）。⇒ 只改顶栏解决不了问题，范围必须含侧栏。 ## 2. owner 拍板的三件 | 决策 | 选择 | 关键理由 | |---|---|---| | 范围 | **顶栏 + 侧栏都收进抽屉** | 只修顶栏仅覆盖 12% | | 断点 | **≤1100（`--bp-lg`）** | 与既有塌陷点一致，不新增断点值；960–1100 现状已是「单列 + 侧栏平铺」，改成抽屉是纯改善；>1100 桌面零改动 | | 顶栏取舍 | ☰ + 站名 + **Vue│React** + 搜索 | framework 切换在看 demo 时高频，值得占一格 | ## 3. 形态 左侧滑入，宽 `min(320px, 86%)`，遮罩 `--mask-overlay`。**不用全屏覆盖** —— 全屏会让人丢失 「我在哪一页」的上下文，而文档站的常见动作是「看一眼目录再回来」。 关闭路径四条：✕ / 点遮罩 / `Esc` / **选中任一导航项后自动关**（SPA 换页不刷新，不关正好挡住刚跳到的内容）。 自动关挂在 `watch(currentPage)` 上而不是逐个链接，这样新增导航入口不会漏。 打开时锁 `body` 滚动、焦点移入抽屉，关闭后焦点还给 ☰。`role="dialog"` + `aria-modal` + ☰ 上的 `aria-expanded`/`aria-controls`。视口回到 >1100 时强制收状态，否则「窄屏开着抽屉→转横屏」 会留下锁死的 body。 ## 4. 关键实现决定：页面树不复制 DOM 同一个 `