title | desc | published |
---|---|---|
Drawer |
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page. |
true |
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.
Open drawer
- Sidebar Item 1
- Sidebar Item 2
{
`
Open drawer
Sidebar Item 1
Sidebar Item 2
</ul>
`
}
{
`
Open drawer
Sidebar Item 1
Sidebar Item 2
</ul>
`
}
Open drawer
- Sidebar Item 1
- Sidebar Item 2
{
`
Open drawer
Sidebar Item 1
Sidebar Item 2
`
}
{
`
Open drawer
Sidebar Item 1
Sidebar Item 2
`
}
Navbar Title
- Navbar Item 1
- Navbar Item 2
Content
- Sidebar Item 1
- Sidebar Item 2
{
`
Navbar Title
Navbar Item 1
Navbar Item 2
Content
Sidebar Item 1
Sidebar Item 2
</ul>
`
}
{
`
Navbar Title
Navbar Item 1
Navbar Item 2
Content
Sidebar Item 1
Sidebar Item 2
</ul>
`
}
Open drawer
- Sidebar Item 1
- Sidebar Item 2
{
`
Open drawer
Sidebar Item 1
Sidebar Item 2
</ul>
`
}
{
`
Open drawer
Sidebar Item 1
Sidebar Item 2
</ul>
`
}