<a id="drawer"></a>

## Drawer  
**Category**: Layout
Sidebar component that can be toggled open/closed
### Examples

#### Basic Drawer  
```python
Div(
    Input(id='my-drawer-1', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-1', cls='btn btn-primary drawer-button'),
        cls='drawer-content'
    ),
    Div(
        Label(fr='my-drawer-1', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(A('Sidebar Item 1')),
            Li(A('Sidebar Item 2')),
            cls='menu p-4 w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'                            
    ),
    cls='drawer h-56'                        
)
```

#### Responsive Drawer  
```python
Div(
    Input(id='my-drawer-2', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-2', cls='btn btn-primary drawer-button lg:hidden'),
        cls='drawer-content flex flex-col items-center justify-center'
    ),
    Div(
        Label(fr='my-drawer-2', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(A('Sidebar Item 1')),
            Li(A('Sidebar Item 2')),
            cls='menu p-4 w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'                            
    ),
    cls='drawer h-56 lg:drawer-open'                        
)
```

#### Responsive Navbar Integration  
```python
Div(
    Input(id='my-drawer-3', type='checkbox', cls='drawer-toggle'),
    Div(
        Div(
            Div(
                Label(
                    Icon.menu_bars(f"{Size.MD}"),
                    fr='my-drawer-3',
                    aria_label='open sidebar',
                    cls='btn btn-square btn-ghost'
                ),
                cls='flex-none lg:hidden'
            ),
            Div('Navbar Title', cls='flex-1 px-2 mx-2'),
            Div(
                Ul(
                    Li(Button('Navbar Item 1')),
                    Li(Button('Navbar Item 2')),
                    cls='menu menu-horizontal'
                ),
                cls='flex-none hidden lg:block'
            ),
            cls='w-full navbar bg-base-300'
        ),
        Div('Content', cls='flex justify-center items-center flex-grow'),
        cls='flex flex-col drawer-content'
    ),
    Div(
        Label(fr='my-drawer-3', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(Button('Sidebar Item 1')),
            Li(Button('Sidebar Item 2')),
            cls='p-4 menu w-60 md:w-80 min-h-full bg-base-200'
        ),
        cls='drawer-side'
    ),
    cls='drawer h-56'
)
```

#### Right-aligned Drawer  
```python
Div(
    Input(id='my-drawer-4', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-4', cls='btn btn-primary drawer-button'),
        cls='drawer-content flex flex-col items-center justify-center'
    ),
    Div(
        Label(fr='my-drawer-4', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(Button('Sidebar Item 1')),
            Li(Button('Sidebar Item 2')),
            cls='menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'
    ),
    cls='drawer drawer-end' 
)
```