组件

Side nav 侧栏菜单

侧栏垂直菜单；子菜单用 details/summary 手风琴；链接与 summary :focus-visible 焦点环。

默认

<nav aria-label="后台菜单" style="max-width:14rem">
  <ul class="pvs-sidenav">
    <li class="pvs-sidenav__item pvs-sidenav__item--active">
      <a class="pvs-sidenav__link" href="#">仪表盘</a>
    </li>
    <li class="pvs-sidenav__item">
      <a class="pvs-sidenav__link" href="#">内容</a>
    </li>
    <li class="pvs-sidenav__item">
      <details class="pvs-sidenav__group" open>
        <summary class="pvs-sidenav__summary">站点</summary>
        <ul class="pvs-sidenav__children">
          <li class="pvs-sidenav__item">
            <a class="pvs-sidenav__link" href="#">导航</a>
          </li>
          <li class="pvs-sidenav__item">
            <a class="pvs-sidenav__link" href="#">主题</a>
          </li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

Dark & compact

<nav aria-label="暗色侧栏" style="max-width:13rem">
  <ul class="pvs-sidenav pvs-sidenav--dark pvs-sidenav--compact">
    <li class="pvs-sidenav__item pvs-sidenav__item--active">
      <a class="pvs-sidenav__link" href="#">概览</a>
    </li>
    <li class="pvs-sidenav__item">
      <a class="pvs-sidenav__link" href="#">成员</a>
    </li>
  </ul>
</nav>

Disabled item

pvs-sidenav__item--disabled 灰显且不可点，用于权限不足菜单。

<nav aria-label="含禁用项" style="max-width:14rem">
  <ul class="pvs-sidenav">
    <li class="pvs-sidenav__item">
      <a class="pvs-sidenav__link" href="#">内容</a>
    </li>
    <li class="pvs-sidenav__item pvs-sidenav__item--disabled">
      <span class="pvs-sidenav__link" aria-disabled="true">商业插件（无权限）</span>
    </li>
  </ul>
</nav>

类名速查

类名	说明
`pvs-sidenav`	ul 根
`pvs-sidenav__link`	菜单链接
`pvs-sidenav__group / __summary`	details 手风琴分组
`pvs-sidenav__children`	子菜单 ul
`pvs-sidenav__item--active`	当前项
`pvs-sidenav--dark / --compact`	暗色 / 紧凑