// In your StatefulComponent's state:
// bool _isBasicDrawerOpen = false;

// NOTE: For a true full-page drawer, place the Drawer component
// at the root of your page layout, not inside a smaller container.
Drawer(
  drawerId: 'my-drawer-1',
  isOpen: _isBasicDrawerOpen,
  onToggle: (isOpen) => setState(() => _isBasicDrawerOpen = isOpen),
  content: DrawerContent([
    label(
      attributes: {'for': 'my-drawer-1'},
      classes: 'btn btn-primary',
      [text('Open drawer')],
    ),
  ]),
  side: DrawerSide(
    drawerId: 'my-drawer-1',
    menuContent: Menu([...]), // Your sidebar menu
  ),
)

Drawer(
  // ... state management ...
  content: DrawerContent([
    div(classes: 'flex flex-col h-full', [
      Navbar(
        [
          NavbarStart([
            // Hamburger button for mobile, implemented as a label.
            label(
              attributes: {'for': 'my-drawer-3'},
              classes: 'btn btn-square btn-ghost lg:hidden',
              [_hamburgerIcon()],
            ),
          ]),
          NavbarCenter([ text('Navbar Title') ]),
          NavbarEnd([
            // Desktop menu wrapped in a div for responsive visibility.
            div(classes: 'hidden lg:block', [
              Menu([ /* Menu Items */ ], style: [Menu.horizontal]),
            ]),
          ]),
        ],
      ),
      // Page content area.
      div(classes: 'flex justify-center items-center grow', [text('Content')]),
    ]),
  ]),
  side: DrawerSide(
    drawerId: 'my-drawer-3',
    menuContent: Menu([...]),
  ),
)

Drawer(
  // ... state management ...
  // This class makes the drawer permanently visible on large screens and above.
  classes: 'lg:drawer-open',
  content: DrawerContent([
    // This label acts as the toggle button but is hidden on large screens.
    label(
      attributes: {'for': 'my-drawer-2'},
      classes: 'btn btn-primary lg:hidden',
      [text('Open drawer')],
    ),
  ]),
  side: DrawerSide(
    drawerId: 'my-drawer-2',
    menuContent: Menu([...]),
  ),
)

Drawer(
  // ... state management ...
  // Use the 'Drawer.end' style modifier to change placement.
  style: [Drawer.end],
  content: DrawerContent( /* ... */ ),
  side: DrawerSide( /* ... */ ),
)