# Side Nav Collapse Button

## Usage

Toggle button for sidenav collapse. Place inside SideNav (reads context automatically) or outside it (hand the same controlled collapsible config to both). Renders as an icon-only ghost button by default.

Inside a `SideNav` the button finds the collapse state by itself. Outside it, bind `v-model:is-collapsed`, or pass the same `collapsible` config (`{ isCollapsed, onCollapsedChange }`) to the button and the `SideNav`, so the two stay in step. Pass `label` to turn the icon-only square into a text button.

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

## Examples

Common configurations, variations, and states.

### Basic

Place a collapse button in the SideNav footer to let users toggle the rail between expanded and collapsed states. Disable the built-in button via collapsible={{hasButton: false}} when positioning it yourself.

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

<template>
  <SideNav :collapsible="{ hasButton: false }">
    <SideNavItem href="#home" icon-class="i-carbon-home" is-selected label="Home" />
    <SideNavItem href="#projects" icon-class="i-carbon-folder" label="Projects" />
    <template #footer>
      <SideNavCollapseButton />
    </template>
  </SideNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Button text. When set, the icon-only square becomes a text button with the arrow in front of the label. Left unset, the accessible name follows the state: expand the sidebar or collapse the sidebar. |
| `collapsible` | `SideNavControlledCollapsible` | — | Controlled `{ isCollapsed, onCollapsedChange }` config. Use it when the button sits outside the `SideNav`, where the sidebar's own collapse context cannot reach it, and pass the same object to the `SideNav`. It wins over `isCollapsed`. |
| `isCollapsed` | `boolean` | — | Controlled collapsed state, for a button placed outside a `SideNav`. Bind it with `v-model:is-collapsed` and give the same value to the `SideNav`, so the two agree. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` inside a `SideNav`, otherwise `'md'` | Button size. The default follows the container. |

The button renders as a ghost <code>Button</code>: an icon-only square at the resolved size, with the chevron in the button's icon slot.

## Events

- `update:isCollapsed(isCollapsed: boolean)`: fires when the button is clicked while `isCollapsed` is bound. Inside a `SideNav` the click goes to the sidebar's own toggle instead, and with `collapsible` the click calls `collapsible.onCollapsedChange`.

## Slots

- `default`: replaces the chevron icon. The visible text still comes from `label`.