可折叠侧边栏导航 · 在线演示

演示了什么：它让你亲眼看到一个后台侧边栏从展开到收起时，文字、搜索框、悬浮提示和内容区如何协同变化。点击菜单会切换右侧标题，输入搜索会实时过滤导航项，移动端默认收起以节省空间。

关键实现：

1. js 里的 render(list=items) 每次搜索后重建菜单，避免隐藏项还残留在焦点顺序里，键盘操作更可控。
2. js 里的 syncActive() 用标题匹配当前项，而不是依赖下标；过滤后列表下标会改变，这样不会点错高亮。
3. css 的 .collapsed .menu a:hover .tip 只在收起态显示提示，展开态直接读文字，减少重复信息干扰。

动手改一改：

1. 改 css 里的 .sidebar{width:280px} 和 .sidebar.collapsed{width:76px}，观察标签隐藏、提示位置和搜索框宽度如何跟着变化。
2. 改 js 里 items 的图标和标题，再搜索新标题，确认过滤和右侧内容仍按同一份数据联动。