可折叠后台侧边栏 · 在线演示

演示了什么：这个 Demo 让你亲眼看到一个后台侧边栏如何在“完整菜单”和“5rem 图标栏”之间切换，同时保留搜索、当前页高亮、容量圆环、头像菜单和主题开关。它适合理解管理后台里常见的导航状态管理。

关键实现：

1. js 里的 groups 和 renderNav() 把菜单数据集中生成，新增入口只改数组，避免 HTML、激活态、徽标三处重复维护。
2. css 里的 .collapsed .sidebar 与 .collapsed .nav a::after 负责折叠宽度和 tooltip，折叠后文字隐藏但鼠标悬停仍能识别入口。
3. js 里的 renderCapacity() 把百分比写入 CSS 变量 --p，圆环由 css 的 conic-gradient 绘制，比 canvas 更轻，也更容易改样式。

动手改一改：

1. 把 js 中 used=60 改成 85，观察容量圆环和数字同步变化。
2. 把 css 里 .collapsed .sidebar{width:5rem} 改成 4rem，看看图标栏更紧凑时 tooltip 位置是否还合适。