Drawer

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

Class name	Type
drawer	Component	The root container
drawer-toggle	Component	For the hidden checkbox that controls the drawer
drawer-content	Component	Container for all page content
drawer-side	Component	The sidebar container
drawer-overlay	Component	The label covers the content when drawer is open
drawer-end	Modifier	puts drawer to the right
drawer-open	Responsive	Forces the drawer to be open

Drawer tags structure

.drawer // The root container
  ├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
  ├── .drawer-content // All your page content goes here
  │    ├── // navbar
  │    ├── // content
  │    ╰── // footer
  ╰── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
       ╰── // Sidebar content (menu or anything)

Drawer sidebar is hidden by default. You can make it visible on larger screens using lg:drawer-open class (or using other responsive prefixes: sm, md, lg, xl)

You can check/uncheck the checkbox using JavaScript or by clicking the <label> tag which is assigned to the hidden checkbox

# Drawer

Open drawer

# Responsive

Sidebar is always visible on large screen, can be toggled on small screen because of lg:drawer-open class

Open drawer