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 Container element
drawer-toggle Component For checkbox element that controls the drawer
drawer-content Component The content container
drawer-side Component The sidebar container
drawer-overlay Component The label covers the content when drawer is open
drawer-mobile
Modifier
Makes drawer to open/close on mobile but will be always visible on desktop
drawer-end
Modifier
puts drawer to the right

Drawer sidebar can be visible by default on large screens or it can be toggleable on both large and small screens.

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)

You can check/uncheck the checkbox using JavaScript or using <label> tag.

# Drawer
# Drawer for mobile + fixed sidebar for desktop
Drawer is always open on desktop size. Drawer can be toggled on mobile size. Resize the browser to see toggle button on mobile size
# Drawer that opens from right side of page