ResponsiveDrawer

Um layout de barra lateral responsivo usando o drawer do DaisyUI. Use para barras laterais de navegação que alternam em mobile mas podem estar sempre visíveis em telas maiores.

Importação

import { ResponsiveDrawer } from 'asterui'

Exemplos

ResponsiveDrawer Básico

Barra lateral responsiva que alterna em mobile.

</>

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

Sempre Aberto no Desktop

Barra lateral alterna em mobile mas está sempre visível em telas lg e acima.

</>

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

Largura Customizada

Barra lateral com largura customizada.

</>

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 à Direita

Barra lateral posicionada no lado direito.

</>

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

Conteúdo de Barra Lateral Customizado

Barra lateral com conteúdo estilizado customizado.

</>

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

Propriedade	Descrição	Tipo	Padrão
children	Área de conteúdo principal	React.ReactNode	-
sidebar	Conteúdo da barra lateral	React.ReactNode	-
open	Estado aberto controlado	boolean	false
onOpenChange	Callback quando estado aberto muda	(open: boolean) => void	-
end	Posiciona barra lateral no lado direito	boolean	false
width	Largura da barra lateral	number | string	320
responsive	Breakpoint no qual barra lateral se torna sempre visível	'sm' | 'md' | 'lg' | 'xl' | '2xl'	-
sidebarClassName	Classes adicionais para container da barra lateral	string	-
contentClassName	Classes adicionais para área de conteúdo	string	-
overlayClassName	Classes adicionais para o overlay	string	-
id	ID único para o drawer (auto-gerado se não fornecido)	string	-
className	Classes CSS adicionais para wrapper do drawer	string	-
data-testid	ID de teste para testing	string	-

Notas de Uso

• ResponsiveDrawer envolve o componente drawer do DaisyUI
• Use open e onOpenChange para estado controlado
• Use prop responsive para tornar barra lateral sempre visível acima de um breakpoint
• Use width para customizar largura da barra lateral (padrão: 320px)
• Use prop end para posicionar barra lateral no lado direito
• Para drawers de painel que deslizam sobre conteúdo (como formulários ou visualizações de detalhes), use o componente Drawer em vez disso

Comparação

Recurso	ResponsiveDrawer	Drawer	Layout.Sider
Caso de Uso	Barras laterais de navegação responsivas	Painéis overlay para formulários, detalhes	Barras laterais recolhíveis permanentes
Renderização	Parte do layout da página	Portal para document.body	Parte da estrutura de Layout
Overlay	Sim (mobile)	Sim (sempre)	Não
Responsivo	Sim (auto-abre no breakpoint)	Não	Sim (auto-recolhe)
Posicionamento	Esquerda ou direita	Todos os 4 lados	Esquerda ou direita
Cabeçalho/Rodapé	Sem built-in	Sim (props title, footer)	Sem built-in