sidebar.md
模式 · PATTERN

侧栏导航 Sidebar

纸色侧栏，宽 266。导航行是扁平的，不是键——当前行只加一层 .07 灰底和 600 字重；真正的操作（收起、退出）才用微拟物键。

来源展示版复刻源SidebarNav.jsx源icons.jsx机读patterns/sidebar.md
综合页侧栏悬停导航行、名片、退出键试试
import { SidebarNav } from './extracted/SidebarNav.jsx'
import { ClockIcon, HomeIcon, MapIcon, PlayRectIcon, StarIcon } from './extracted/icons.jsx'

export function Hub() {
  return (
    <SidebarNav
      active="home"
      groups={[
        { items: [{ id: 'home', label: '首页', icon: <HomeIcon /> }] },
        { items: [
          { id: 'fav', label: '我的收藏', icon: <StarIcon />, count: 12 },
          { id: 'hist', label: '历史记录', icon: <ClockIcon />, count: 38 },
        ] },
      ]}
      user={{ name: '学员示例', email: '[email protected]' }}
    />
  )
}
课程页侧栏分组标签：mono 10 · 字距 1.5 · #A2A29C
import { SidebarNav } from './extracted/SidebarNav.jsx'
import { ClockIcon, HomeIcon, MapIcon, PlayRectIcon, StarIcon } from './extracted/icons.jsx'

export function Course() {
  return (
    <SidebarNav
      active="map"
      groups={[
        { items: [
          { id: 'map', label: '学习地图', icon: <MapIcon /> },
          { id: 'ovw', label: '课程总览', icon: <PlayRectIcon /> },
        ] },
        { label: '主线课程', items: [
          { id: 's1', label: '软件基础', count: 5 },
          { id: 's2', label: '插件教学', count: 4 },
          { id: 's3', label: '笔记系统', count: 4 },
        ] },
        { label: '增值课程', items: [{ id: 's4', label: '人脉管理', count: 3 }] },
      ]}
    />
  )
}

规格

部位规格
容器宽 266 · 底 #F6F6F4 · 右侧 .07 细线 · 进场 zzmSlide .28s
头部收起键（28 幽灵图标键，恒位左 14 / 上 12）+ 星座标 22 + 品牌名 15 / 650
导航行内距 9 × 10 · 圆角 8 · 13.5px · 当前行 .07 灰底 + 600 · 悬停 .zzm-navbtn
计数mono 9.5 · #B0B0AA · 两位补零
名片36 圆形头像 · 名字 13 / 600 · 邮箱 10.5 灰 · 悬停 .zzm-userfoot
退出.zzm-btn --block 纸键

铁律

✓ 要导航行扁平，当前行灰底
✗ 不要把导航行做成一排凸键
✓ 要收起键展开态与收起态同一坐标，零位移
✗ 不要用朱色标当前导航项——朱色留给内容里的「下一步」