sebs7n-ui

Navegación

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.

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

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

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

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 AppShell