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

2.3 KiB Raw Blame History

Layout control

Overview

State

Commands

Ids

High Level Hierarchical Structure

2.3 KiB

Raw Blame History