# SidebarToggle

> El botón que pliega y despliega el `Sidebar`, como el de la lista de fuentes de Drive y Mail de iCloud.

```tsx
import { SidebarToggle } from "sebs7n-ui/sidebar-toggle"
```

## Ejemplos

### Arriba, junto a la marca

En el `SidebarHeader`, a la derecha de la marca, como Drive y Mail de iCloud. Plegado, queda primero y centrado. El estado lo guarda la app.

```tsx
import { FileTextIcon, UsersIcon } from "lucide-react"
import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarItem } from "sebs7n-ui/sidebar"
import { SidebarToggle } from "sebs7n-ui/sidebar-toggle"
import { useState } from "react"

function Basic() {
  const [collapsed, setCollapsed] = useState(false)
  return (
    <div className="h-72 overflow-hidden rounded-surface border border-separator">
      <Sidebar className="h-full" collapsed={collapsed} id="invoices-sidebar">
        <SidebarHeader>
          <div className="flex h-8 items-center gap-2 ps-1 group-data-collapsed/sidebar:h-auto group-data-collapsed/sidebar:flex-col group-data-collapsed/sidebar:ps-0">
            <div className="size-6 shrink-0 rounded-control bg-label" />
            <span className="text-callout font-semibold group-data-collapsed/sidebar:hidden">Acme</span>
            <SidebarToggle onCollapsedChange={setCollapsed} />
          </div>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarItem active icon={<FileTextIcon />}>
              Facturas
            </SidebarItem>
            <SidebarItem icon={<UsersIcon />}>Clientes</SidebarItem>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </div>
  )
}
```

## Props

### SidebarToggle

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `aria-controls` | `string` | — | El `id` del panel que pliega. Sin él, el del `Sidebar` que lo contiene, si tiene `id`. |
| `collapsed` | `boolean` | — | Plegado o no. Sin esta prop, lo que diga el `Sidebar` de afuera (`collapsed`). |
| `labels` | `Partial<SidebarToggleLabels>` | — | Textos: `toggle` (el nombre), `collapse` y `expand` (el tooltip). Los que vienen por defecto son `sidebarToggleLabels`; también por `LabelsProvider` (`sidebar.toggle`, `sidebar.collapse`, `sidebar.expand`). |
| `onCollapsedChange` | `(collapsed: boolean) => void` | — | Avisa el estado nuevo al hacer clic. Guardarlo (cookie, `localStorage`) es de la app. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter · Espacio | Pliega o despliega el sidebar. |

## Accesibilidad

- Es el botón de ícono `plain` de 28. El nombre es fijo («Barra lateral») y `aria-expanded` dice el estado; el tooltip dice la acción: «Plegar barra lateral» / «Desplegar barra lateral». Sin `id` en el `Sidebar` no lleva `aria-controls`.
- `aria-expanded` dice si el sidebar está desplegado; `aria-controls` apunta al `id` del `Sidebar` que lo contiene (dale uno) o al que se pase.
- Adentro del Sheet del teléfono no se dibuja: ahí no hay nada que plegar.

## Reglas de uso

- Va arriba, en el `SidebarHeader`, a la derecha de la marca; nunca en el pie junto al usuario. Plegado, queda primero y centrado en la columna de íconos.
- Sin `collapsed`, lee el del `Sidebar` de afuera; `onCollapsedChange` avisa el estado nuevo. Guardarlo (una cookie para que el servidor dibuje igual) y escuchar ⌘B es de la app: pasale `aria-keyshortcuts="Meta+B"` si lo tiene.
- Solo por subpath (`sebs7n-ui/sidebar-toggle`): el barrel está en su tope.

## Relacionados

[sidebar](/docs/components/sidebar.md) · [app-shell](/docs/components/app-shell.md)