侧边栏切换应使用单个DOM节点配合CSS与JS控制，而非模板引擎动态渲染；需遵循可访问性规范，用role="tablist"及配套属性；hidden属性优于display:none；响应式应采用移动优先策略。
侧边栏切换不该依赖模板引擎动态渲染
模板引擎（如 Pug、EJS）适合生成静态结构，但侧边栏的显隐是运行时交互行为，硬编码多个 .sidebar 版本到模板里会导致 DOM 膨胀、内存占用高，且无法响应视口变化。真正需要的是单个 DOM 节点 + CSS 控制显示状态 + JS 触发切换。
常见错误是把“不同菜单项对应不同 sidebar 内容”理解为必须用模板条件渲染：if menu === 'dashboard' 渲染一套 HTML，elif menu === 'settings' 再渲染另一套——这会让每次切换都触发重排重绘，还破坏了语义化结构。
- 正确做法：HTML 中只保留一个
#sidebar容器，内部用.tab-pane或[role="tabpanel"]区分内容区 - 切换时仅修改
aria-selected和hidden属性，不销毁/重建 DOM - 模板只负责初始结构输出，不参与运行时状态管理
必须用 role="tablist" 替代 div 堆砌的 tab 结构
纯靠 <div class="tab-item"> + display: none 切换，屏幕阅读器会把所有 tab 内容一股脑读出来，键盘用户也无法用方向键导航。原生可访问性要求明确语义。
实操中容易漏掉关键属性配对：
立即学习“前端免费学习笔记（深入）”；
-
<button role="tab" aria-controls="panel-1" id="tab-1">必须和<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">成对出现 - 每个
role="tab"需要tabindex="0"，激活态加aria-selected="true" - 非激活的
tabpanel必须设hidden属性，而非仅靠 CSSdisplay: none
hidden 属性比 style.display 更可靠
直接操作 sidebar.style.display = 'none' 看似简单，但极易被外部 CSS 的 !important 或更高优先级规则覆盖；更麻烦的是，当侧边栏内有 position: absolute 子元素时，display: none 会让它们脱离文档流，导致尺寸计算异常甚至布局错位。
用 hidden 属性配合 CSS 统一控制，既语义清晰又避免冲突：
/* 在全局 CSS 中定义一次即可 */
[hidden] {
display: none;
}JS 里只需 panel.hidden = true 或 panel.removeAttribute('hidden')，无需关心样式权重。
min-width 媒体查询才是响应式侧边栏的起点
很多项目用 @media (max-width: 1230px) 强制隐藏侧边栏，结果小屏下 JS 切换按钮完全失效——因为媒体查询的 display: none 优先级高于 JS 添加的 .d-none 类，后者根本不起作用。
正确逻辑是「移动优先」：
- CSS 默认设
.sidebar { display: none; } - 仅在宽屏断点用
@media (min-width: 1231px)恢复显示 - JS 的
classList.toggle("d-none")只在 ≥1231px 下生效（用于手动收起），窄屏下它本来就不显示，点击才真正触发显示
这个顺序不能颠倒，否则 JS 和 CSS 就在打架。
