# Layout control

## Overview

This component renders the global layout of the application.
This is only one instance per session.

## State

| Name                 | Type    | Description                      | Default |
|----------------------|---------|----------------------------------|---------|
| `left_drawer_open`   | boolean | True if the left drawer is open  | True    |
| `right_drawer_open`  | boolean | True if the right drawer is open | True    |
| `left_drawer_width`  | integer | Width of the left drawer         | 250     |
| `right_drawer_width` | integer | Width of the right drawer        | 250     |

## Commands

| Name                                    | Description                                                                            |
|-----------------------------------------|----------------------------------------------------------------------------------------|
| `toggle_drawer(side)`                   | Toggles the drawer on the specified side                                               |
| `update_drawer_width(side, width=None)` | Updates the drawer width on the specified side. The width is given by the HTMX request |

## Ids

| Name        | Description       |
|-------------|-------------------|
| `layout`    | Singleton         |
| `layout_h`  | header            |
| `layout_hl` | header left side  |
| `layout_hr` | header right side |
| `layout_f`  | footer            |
| `layout_fl` | footer left side  |
| `layout_fr` | footer right side |
| `layout_ld` | left drawer       |
| `layout_rd` | right drawer      |

## High Level Hierarchical Structure
```
Div(id="layout")
├── Header
│   ├── Div(id="layout_hl")                     
│   │   ├── Icon                # Left drawer icon button
│   │   └── Div                 # Left content for the header
│   └── Div(id="layout_hr")
│       ├── Div                 # Right content for the header
│       └── UserProfile         # user profile icon button
├── Div                         # Left Drawer
├── Main                        # Main content
├── Div                         # Right Drawer                      
├── Footer                      # Footer
└── Script                      # To initialize the resizing
```