# 侧栏 Sidebar

分类：导航 · React：Sidebar

完整的侧栏：分组、子菜单、徽标、折叠成 56px 图标栏（标签淡出、悬停出 tooltip）、拖动宽度；浮动 / 内嵌两种变体。

## 示例
```html
<div style="display:flex;height:420px;border:1px solid var(--line)">
<aside class="xxd-sidebar" data-xxd-sidebar id="sb1" style="--sidebar-w:232px">
  <div class="xxd-sidebar__head"><span class="xxd-logo"><span class="xxd-logo__mark"></span><span data-sidebar-hide>小小东</span></span></div>
  <nav class="xxd-sidebar__body">
    <div class="xxd-sidebar__group">
      <div class="xxd-sidebar__label">内容</div>
      <a class="xxd-sidebar__item" href="#" aria-current="page"><i data-xxd-icon="House" data-size="18"></i><span>首页</span></a>
      <a class="xxd-sidebar__item" href="#"><i data-xxd-icon="Bookmark" data-size="18"></i><span>收藏</span><span class="xxd-badge">12</span></a>
      <button class="xxd-sidebar__item" aria-expanded="true" data-sidebar-sub="sb1-sub"><i data-xxd-icon="Folder" data-size="18"></i><span>风格库</span></button>
      <div class="xxd-sidebar__sub" id="sb1-sub">
        <a class="xxd-sidebar__item" href="#"><span>海报</span></a>
        <a class="xxd-sidebar__item" href="#"><span>封面</span></a>
      </div>
    </div>
    <div class="xxd-sidebar__group">
      <div class="xxd-sidebar__label">账号</div>
      <a class="xxd-sidebar__item" href="#"><i data-xxd-icon="Settings" data-size="18"></i><span>设置</span></a>
    </div>
  </nav>
  <div class="xxd-sidebar__foot"><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" data-xxd-sidebar-toggle="sb1" aria-label="折叠侧栏"><i data-xxd-icon="PanelsTopLeft" data-size="16"></i></button></div>
  <div class="xxd-sidebar__resize" data-sidebar-resize></div>
</aside>
<main style="flex:1;min-width:0;padding:16px" class="xxd-muted">内容区</main>
</div>
```

## 属性与类名
- `data-collapsed`：折叠成图标栏
- `data-variant`：floating | inset
- `--sidebar-w`：宽度（拖动时更新）
- `data-min / data-max`：拖动范围（缺省 200–400）
- `[data-xxd-sidebar-toggle="id"]`：折叠 / 展开按钮
- `data-sidebar-sub="id"`：有子菜单的项
- 类名：`xxd-sidebar` `xxd-sidebar__head` `xxd-sidebar__body` `xxd-sidebar__foot` `xxd-sidebar__group` `xxd-sidebar__label` `xxd-sidebar__item` `xxd-sidebar__sub` `xxd-sidebar__resize`

## 键盘与读屏
- 折叠时每个项的名字自动变成 aria-label 和 tooltip
- 子菜单按钮带 aria-expanded

## 规则
- 折叠切换即时，标签淡出、图标不动（只动 opacity）
- 激活改颜色和底色，不改线宽、不加粗