Drawer

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

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.