53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
# 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
|
|
``` |