Drawer

Panel lateral deslizante desde el borde de la pantalla. Ideal para navegación mobile, filtros o formularios extensos.

---

Import

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from '@imansi/ui';

---

Uso básico

<Drawer>
  <DrawerTrigger asChild>
    <Button>Abrir menú</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Menú de navegación</DrawerTitle>
      <DrawerDescription>Accedé a todas las secciones</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      {/* contenido */}
    </div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="outline">Cerrar</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

---

Desde distintos lados

<DrawerContent side="right">  {/* por defecto */}
<DrawerContent side="left">   {/* menú lateral izquierdo */}
<DrawerContent side="top">    {/* notificaciones */}
<DrawerContent side="bottom"> {/* acciones mobile, tipo share sheet */}

---

Props

DrawerContent

Prop	Tipo	Default	Descripción
side	'top' | 'right' | 'bottom' | 'left'	'right'	Lado desde donde se abre
className	string	—	Clases adicionales

---

Accesibilidad

• Escape cierra el drawer
• Click en el overlay cierra
• Focus trap dentro
• Scroll del body se bloquea
• role="dialog" + aria-modal="true"