可折叠侧边导航

Collapsible Sidebar：完整导航与图标栏切换，保留选中项、数量角标、分组和账户入口。

1 个规范与展示分区 · 独立组件页面

可折叠侧边导航规范

组件规范与变体。组合示例保持自身业务职责。

职责与结构

可折叠侧边导航用于工作空间的长期入口。展开时呈现品牌、分组、图标、名称、数量和账号；收起后保留相同入口的图标、角标与头像，给主内容更多空间。当前入口在两态中保持一致。

品牌与切换按钮 → 常用及扩展导航分组 → 底部账号。每个入口是一个独立控件，数量属于该入口；账号拥有独立名称。示例使用按钮切换本地当前项，真实跨页导航接入时使用带 href 的链接。

变体与 Tokens

变体使用规则
项目	规范
展开	固定宽度 240px，显示完整品牌、分组标题、入口文字、数量及账号角色。
图标栏	固定宽度 72px，保留图标、数量角标和账号头像；悬停或聚焦显示完整入口名称。
当前／悬停／焦点	当前项使用科技蓝与 aria-current="page"；悬停沿用共享 ghost 按钮反馈；键盘焦点保留独立轮廓。
静态／不可用	无脚本时仍展示完整的两态；本地示例控件初始化后才启用。业务不可用项须保留名称并说明原因，不伪装成可跳转目标。

宽度为组件尺寸 240 / 72px；导航行和切换按钮为 --control-lg（44px），图标为 --icon-md（20px），外圆角为 --radius-lg（24px），行内圆角为 --radius-sm（12px），内边距为 --space-3（12px）。表面、边框、模糊和阴影引用 --surface-pane、--glass-border、--glass-blur、--shadow-1；文字、当前色、角标、头像与提示复用现有共享规则。

交互与状态示例

两例均可独立展开、收起和选择入口；操作只影响本页展示。图标栏保留待办与消息数量，账号固定在导航底部。

交互与无障碍

点击切换按钮仅改变所属实例的展开状态，并同步 aria-expanded、按钮名称及可见状态标签；不重置当前项，不改变入口数量，不跳转或提交业务。Tab 依照品牌后的切换按钮、导航入口、账号顺序移动；原生按钮支持 Enter / Space。图标栏提示同时支持悬停与焦点，Escape 关闭提示；状态切换后保留切换按钮焦点。窄容器把两例纵向排列，导航宽度保持不变，极窄容器允许示例区域横向浏览。减少动效时停止宽度过渡。

接入约定

接入参数与事件
项目	规范
data-collapsible-sidebar / data-sidebar-state	每个实例独立；状态只允许 expanded 或 collapsed，展示规则与运行状态使用同一属性。
data-sidebar-toggle / aria-controls / aria-expanded	原生 button；aria-controls 指向该实例唯一 nav ID，aria-expanded 与实例状态一致。
data-sidebar-item / aria-current / 数量	入口有稳定 key；只有一个当前项使用 aria-current="page"。可访问名称包含数量与单位，视觉数字仅作补充。
初始化与事件	window.initCollapsibleSidebars(host=document) 可重复调用；切换后派发冒泡 sidebarstatechange，detail.state 为展开状态；选择后派发 sidebarselect，detail.key / label 为入口 key 与中文名称。初始化不派发业务事件。
提示、账号与状态播报	data-sidebar-tooltip 使用唯一 ID 和 tooltip 语义，不使用 menu；data-sidebar-account 单独处理账号动作。每例只更新自己的状态播报。
业务接入	示例只更新当前项与显示状态。实际路由、账号菜单、权限和持久化由业务层接入，按钮初始化前保持 disabled。

查看最小使用示例

<aside class="collapsible-sidebar"
  data-collapsible-sidebar data-sidebar-state="expanded">
  <button class="btn ghost icon-only collapsible-sidebar__toggle"
    type="button" data-sidebar-toggle aria-controls="workspace-navigation"
    aria-expanded="true" aria-label="收起导航" disabled>…</button>
  <nav class="collapsible-sidebar__navigation"
    id="workspace-navigation" aria-label="工作空间导航">
    <button class="btn ghost collapsible-sidebar__item" type="button"
      data-sidebar-item="workbench" value="workbench"
      aria-label="工作台" aria-current="page" disabled>
      …<span data-sidebar-label>工作台</span>
    </button>
  </nav>
</aside>
// 加载共享 styles.css 与组件 CSS / JS；每个实例使用唯一 ID。
// window.initCollapsibleSidebars(host) 可重复调用，初始化后启用控件。

维护位置：scripts/collapsible-sidebar.mjs；示例行为：scripts/collapsible-sidebar.js。组合应用见本页末尾引用。

可折叠侧边导航