Navigation
仪表盘侧边栏
一个可折叠的仪表盘侧边栏，包含图标导航、分组区域和响应式行为。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a collapsible dashboard sidebar. Expanded state shows icons + labels; collapsed state shows only icons. Include 8 navigation items grouped into sections (Main, Analytics, Settings), a collapse toggle at the bottom, and a user avatar at the top. Use shadcn/ui Tooltip for collapsed icons and Tailwind CSS. Persist collapsed state in localStorage and make it responsive.
中文提示词
创建一个可折叠的仪表盘侧边栏。展开状态显示图标+标签；折叠状态只显示图标。包含 8 个按分组排列的导航项（Main、Analytics、Settings），底部折叠切换按钮，顶部用户头像。使用 shadcn/ui Tooltip 显示折叠状态下的图标标签，以及 Tailwind CSS。将折叠状态持久化到 localStorage 并使其响应式。
## 概述
一个节省空间同时保持导航可访问性的仪表盘侧边栏。支持折叠状态和响应式布局。
## 功能特性
- 仅图标 / 图标+标签 折叠模式
- 分组导航区域
- 用户头像页头
- 折叠模式下的 Tooltip 标签
- localStorage 持久化
- 响应式行为
## 使用方法
将提示词复制到 v0 或 Cursor 中。调整导航分组和图标以适应你的应用。
## 自定义选项
修改提示词以：
- 添加嵌套子菜单
- 为导航项添加角标数量
- 支持键盘快捷键
- 更改配色主题（深/浅）