# 侧边导航分组

## 使用方法

侧栏里的一个分组，带分组标题、可选的副标题和末尾内容。

一个分组就是一簇有名字的 `SideNavItem`。`subtitle` 在标题下面再加一行小字，`end` 靠在标题这一行的末尾。侧栏收成窄栏后，标题只是视觉上藏起来，读屏仍然能读到分组名；`isHeaderHidden` 则在任何宽度下都藏起来。

```ts
import { SideNavSection } from '@astryx-vue/core/SideNav'
```

## 示例

常见的用法和不同的状态。

### 基础

把相关的侧边导航项放进带标题的分组里。导航长起来后，用分组切成一簇一簇，像「总览」和「账户」这样扫一眼就能找到。

```vue
<script setup lang="ts">
import { SideNav, SideNavItem, SideNavSection } from '@astryx-vue/core/SideNav'
</script>

<template>
  <SideNav>
    <SideNavSection title="Overview">
      <SideNavItem href="#dashboard" icon-class="i-carbon-dashboard" is-selected label="Dashboard" />
      <SideNavItem href="#analytics" icon-class="i-carbon-chart-line" label="Analytics" />
    </SideNavSection>
    <SideNavSection title="Account">
      <SideNavItem href="#profile" icon-class="i-carbon-user" label="Profile" />
    </SideNavSection>
  </SideNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | — | 分组名。侧栏收起后视觉上藏起来，读屏仍然读得到。必填。 |
| `subtitle` | `string` | — | 标题下面第二行小字。 |
| `isHeaderHidden` | `boolean` | `false` | 任何宽度下都藏起标题。读屏仍然读得到。 |

## 插槽

- `default`：这个分组里的导航项。
- `end`：标题这一行末尾的内容，例如一个新增按钮。