Drawer Component
The Drawer component is a UI element that provides a hidden sidebar, which can slide in from the side of the screen. It is commonly used for navigation menus, settings, or additional content that users can access without leaving the current page.
Drawer
<!-- Drawer Toggle Button -->
<label class="btn btn-primary" for="drawerToggle">Side Drawer</label>
<div class="drawer">
<input class="drawer-toggle" type="checkbox" id="drawerToggle" />
<label class="drawer-overlay" for="drawerToggle"></label>
<!-- Drawer Side Bar -->
<div class="drawer-side left-0">
<ul>
<li><a href="">Dashboard</a></li>
<li><a href="">Category</a></li>
<li><a href="">Tag</a></li>
<li><a href="">Product</a></li>
</ul>
</div>
</div>
<!-- Drawer Toggle Button -->
<label className="btn btn-primary" for="drawerToggle">Side Drawer</label>
<div className="drawer">
<input className="drawer-toggle" type="checkbox" id="drawerToggle" />
<label className="drawer-overlay" for="drawerToggle"></label>
<!-- Drawer Side Bar -->
<div className="drawer-side left-0">
<ul>
<li><a href="">Dashboard</a></li>
<li><a href="">Category</a></li>
<li><a href="">Tag</a></li>
<li><a href="">Product</a></li>
</ul>
</div>
</div>
Right Drawer
<!-- Drawer Toggle Button -->
<label class="btn btn-primary" for="drawerToggle">Right Side Drawer</label>
<div class="drawer">
<input class="drawer-toggle" type="checkbox" id="drawerToggle" />
<label class="drawer-overlay" for="drawerToggle"></label>
<!-- Drawer Side Bar -->
<div class="drawer-side left-0">
<ul>
<li><a href="">Dashboard</a></li>
<li><a href="">Category</a></li>
<li><a href="">Tag</a></li>
<li><a href="">Product</a></li>
</ul>
</div>
</div>
<!-- Drawer Toggle Button -->
<label className="btn btn-primary" for="drawerToggle">Side Drawer</label>
<div className="drawer">
<input className="drawer-toggle" type="checkbox" id="drawerToggle" />
<label className="drawer-overlay" for="drawerToggle"></label>
<!-- Drawer Side Bar -->
<div className="drawer-side left-0">
<ul>
<li><a href="">Dashboard</a></li>
<li><a href="">Category</a></li>
<li><a href="">Tag</a></li>
<li><a href="">Product</a></li>
</ul>
</div>
</div>