ResponsiveDrawer

Un diseño de barra lateral responsiva usando el drawer de DaisyUI. Úsalo para barras laterales de navegación que se alternan en móvil pero pueden estar siempre visibles en pantallas más grandes.

Importar

import { ResponsiveDrawer } from 'asterui'

Ejemplos

ResponsiveDrawer básico

Barra lateral responsiva que se alterna en móvil.

</>

Open Sidebar

Main content area

• Dashboard
• Settings
• Profile

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        sidebar={
          <Menu>
            <Menu.Item>Dashboard</Menu.Item>
            <Menu.Item>Settings</Menu.Item>
            <Menu.Item>Profile</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Open Sidebar
          </Button>
          <p className="mt-4">Main content area</p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

Siempre abierto en escritorio

La barra lateral se alterna en móvil pero siempre es visible en pantallas lg y superiores.

</>

Menu

Resize the window to see the responsive behavior. On large screens, the sidebar is always visible.

• Navigation
• Dashboard
• Analytics
• Settings

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        responsive="lg"
        sidebar={
          <Menu>
            <Menu.Title>Navigation</Menu.Title>
            <Menu.Item>Dashboard</Menu.Item>
            <Menu.Item>Analytics</Menu.Item>
            <Menu.Item>Settings</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button className="lg:hidden" onClick={() => setOpen(true)}>
            Menu
          </Button>
          <p className="mt-4">
            Resize the window to see the responsive behavior.
            On large screens, the sidebar is always visible.
          </p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

Ancho personalizado

Barra lateral con ancho personalizado.

</>

Open Wide Sidebar

• Wide Sidebar
• Item with more space
• Another item

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        width={400}
        sidebar={
          <Menu>
            <Menu.Title>Wide Sidebar</Menu.Title>
            <Menu.Item>Item with more space</Menu.Item>
            <Menu.Item>Another item</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Open Wide Sidebar
          </Button>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

Barra lateral derecha

Barra lateral posicionada en el lado derecho.

</>

Open Right Sidebar

Main content area

• Info Panel
• Quick Actions
• Help

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        end
        sidebar={
          <Menu>
            <Menu.Item>Info Panel</Menu.Item>
            <Menu.Item>Quick Actions</Menu.Item>
            <Menu.Item>Help</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Open Right Sidebar
          </Button>
          <p className="mt-4">Main content area</p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

Contenido personalizado de barra lateral

Barra lateral con contenido estilizado personalizado.

</>

Toggle Sidebar

Application content

JD

John Doe

Admin

• Dashboard
• Users
• Reports
• Settings

import { ResponsiveDrawer, Button, Avatar } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        sidebarClassName="bg-base-300"
        sidebar={
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <Avatar>JD</Avatar>
              <div>
                <div className="font-semibold">John Doe</div>
                <div className="text-sm opacity-70">Admin</div>
              </div>
            </div>
            <ul className="menu">
              <li><a>Dashboard</a></li>
              <li><a>Users</a></li>
              <li><a>Reports</a></li>
              <li><a>Settings</a></li>
            </ul>
          </div>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Toggle Sidebar
          </Button>
          <p className="mt-4">Application content</p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

API

ResponsiveDrawer

Propiedad	Descripción	Tipo	Predeterminado
children	Área de contenido principal	React.ReactNode	-
sidebar	Contenido de barra lateral	React.ReactNode	-
open	Estado abierto controlado	boolean	false
onOpenChange	Callback cuando cambia el estado abierto	(open: boolean) => void	-
end	Posicionar barra lateral en el lado derecho	boolean	false
width	Ancho de la barra lateral	number | string	320
responsive	Breakpoint en el cual la barra lateral se vuelve siempre visible	'sm' | 'md' | 'lg' | 'xl' | '2xl'	-
sidebarClassName	Clases adicionales para contenedor de barra lateral	string	-
contentClassName	Clases adicionales para área de contenido	string	-
overlayClassName	Clases adicionales para el overlay	string	-
id	ID único para el drawer (auto-generado si no se proporciona)	string	-
className	Clases CSS adicionales para envoltorio del drawer	string	-
data-testid	ID de prueba para testing	string	-

Notas de uso

• ResponsiveDrawer envuelve el componente drawer de DaisyUI
• Usa open y onOpenChange para estado controlado
• Usa la prop responsive para hacer la barra lateral siempre visible sobre un breakpoint
• Usa width para personalizar el ancho de la barra lateral (predeterminado: 320px)
• Usa la prop end para posicionar la barra lateral en el lado derecho
• Para drawers de panel que se deslizan sobre el contenido (como formularios o vistas de detalles), usa el componente Drawer en su lugar

Comparación

Característica	ResponsiveDrawer	Drawer	Layout.Sider
Caso de uso	Barras laterales de navegación responsivas	Paneles overlay para formularios, detalles	Barras laterales colapsables permanentes
Renderizado	Parte del diseño de página	Portal a document.body	Parte de la estructura Layout
Overlay	Sí (móvil)	Sí (siempre)	No
Responsivo	Sí (auto-apertura en breakpoint)	No	Sí (auto-colapso)
Posición	Izquierda o derecha	Los 4 lados	Izquierda o derecha
Header/Footer	No integrado	Sí (props title, footer)	No integrado