ResponsiveDrawer

Une disposition de barre latérale réactive utilisant le drawer de DaisyUI. Utilisez-la pour les barres latérales de navigation qui basculent sur mobile mais peuvent être toujours visibles sur les grands écrans.

Import

import { ResponsiveDrawer } from 'asterui'

Exemples

ResponsiveDrawer basique

Barre latérale réactive qui bascule sur 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

Toujours ouvert sur ordinateur

La barre latérale bascule sur mobile mais est toujours visible sur les écrans lg et plus.

</>

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

Largeur personnalisée

Barre latérale avec largeur personnalisée.

</>

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

Barre latérale à droite

Barre latérale positionnée du côté droit.

</>

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

Contenu de barre latérale personnalisé

Barre latérale avec contenu stylisé personnalisé.

</>

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

Propriété	Description	Type	Défaut
children	Zone de contenu principale	React.ReactNode	-
sidebar	Contenu de la barre latérale	React.ReactNode	-
open	État d’ouverture contrôlé	boolean	false
onOpenChange	Callback lorsque l’état d’ouverture change	(open: boolean) => void	-
end	Positionner la barre latérale du côté droit	boolean	false
width	Largeur de la barre latérale	number | string	320
responsive	Point de rupture auquel la barre latérale devient toujours visible	'sm' | 'md' | 'lg' | 'xl' | '2xl'	-
sidebarClassName	Classes supplémentaires pour le conteneur de la barre latérale	string	-
contentClassName	Classes supplémentaires pour la zone de contenu	string	-
overlayClassName	Classes supplémentaires pour la superposition	string	-
id	ID unique pour le drawer (généré automatiquement s’il n’est pas fourni)	string	-
className	Classes CSS supplémentaires pour l’enveloppe du drawer	string	-
data-testid	ID de test pour les tests	string	-

Notes d’utilisation

• ResponsiveDrawer enveloppe le composant drawer de DaisyUI
• Utilisez open et onOpenChange pour un état contrôlé
• Utilisez la propriété responsive pour rendre la barre latérale toujours visible au-dessus d’un point de rupture
• Utilisez width pour personnaliser la largeur de la barre latérale (par défaut : 320px)
• Utilisez la propriété end pour positionner la barre latérale du côté droit
• Pour les drawers de panneau qui glissent sur le contenu (comme les formulaires ou les vues détaillées), utilisez plutôt le composant Drawer

Comparaison

Fonctionnalité	ResponsiveDrawer	Drawer	Layout.Sider
Cas d’usage	Barres latérales de navigation réactives	Panneaux superposés pour formulaires, détails	Barres latérales pliables permanentes
Rendu	Partie de la disposition de la page	Portail vers document.body	Partie de la structure Layout
Superposition	Oui (mobile)	Oui (toujours)	Non
Réactif	Oui (auto-ouverture au point de rupture)	Non	Oui (auto-pliage)
Placement	Gauche ou droite	Les 4 côtés	Gauche ou droite
En-tête/Pied	Pas intégré	Oui (propriétés title, footer)	Pas intégré