ResponsiveDrawer

A responsive sidebar layout using DaisyUI’s drawer. Use for navigation sidebars that toggle on mobile but can be always visible on larger screens.

Import

import { ResponsiveDrawer } from 'asterui'

Examples

Basic ResponsiveDrawer

Responsive sidebar that toggles on mobile.

Main content area

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

Always Open on Desktop

Sidebar toggles on mobile but is always visible on lg screens and up.

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

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

Custom Width

Sidebar with custom width.

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

Right-Side Sidebar

Sidebar positioned on the right side.

Main content area

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

Custom Sidebar Content

Sidebar with custom styled content.

Application content

John Doe

Admin

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`

Property	Description	Type	Default
`children`	Main content area	`React.ReactNode`	-
`sidebar`	Sidebar content	`React.ReactNode`	-
`open`	Controlled open state	`boolean`	`false`
`onOpenChange`	Callback when open state changes	`(open: boolean) => void`	-
`end`	Position sidebar on the right side	`boolean`	`false`
`width`	Width of the sidebar	`number \| string`	`320`
`responsive`	Breakpoint at which sidebar becomes always visible	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	-
`sidebarClassName`	Additional classes for sidebar container	`string`	-
`contentClassName`	Additional classes for content area	`string`	-
`overlayClassName`	Additional classes for the overlay	`string`	-
`id`	Unique ID for the drawer (auto-generated if not provided)	`string`	-
`className`	Additional CSS classes for drawer wrapper	`string`	-
`data-testid`	Test ID for testing	`string`	-

Usage Notes

ResponsiveDrawer wraps DaisyUI’s drawer component
Use open and onOpenChange for controlled state
Use responsive prop to make sidebar always visible above a breakpoint
Use width to customize sidebar width (default: 320px)
Use end prop to position the sidebar on the right side
For panel drawers that slide over content (like forms or detail views), use the Drawer component instead

Comparison

Feature	ResponsiveDrawer	Drawer	Layout.Sider
Use Case	Responsive navigation sidebars	Overlay panels for forms, details	Permanent collapsible sidebars
Rendering	Part of page layout	Portal to document.body	Part of Layout structure
Overlay	Yes (mobile)	Yes (always)	No
Responsive	Yes (auto-open at breakpoint)	No	Yes (auto-collapse)
Placement	Left or right	All 4 sides	Left or right
Header/Footer	No built-in	Yes (title, footer props)	No built-in