notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

offline docs

Browse Source
This commit is contained in:
Bryce
2025-08-13 09:33:19 -07:00
parent 2a451ce840
commit b7801a0caa
43 changed files with 4617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
offline-docs/daisyui/drawer.md Normal file
View File

@@ -0,0 +1,117 @@
# daisyUI Documentation - Drawer Component
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
## 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)
```
## Classes and Usage
### Core Classes:
- **drawer** - The root container
- **drawer-toggle** - A hidden checkbox to toggle the visibility of the sidebar
- **drawer-content** - All your page content goes here
- **drawer-side** - Sidebar wrapper
- **drawer-overlay** - A dark overlay that covers the whole page when the drawer is open
- **drawer-open** - Opens the drawer on larger screens (use with responsive prefixes: sm, md, lg, xl)
## Examples
### Basic Drawer
```html
<div class="drawer">
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content here -->
<label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
</div>
<div class="drawer-side">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
```
### Navbar Menu for Desktop + Sidebar Drawer for Mobile
```html
<div class="drawer">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<!-- Navbar -->
<div class="navbar bg-base-300 w-full">
<div class="flex-none lg:hidden">
<label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</label>
</div>
<div class="mx-2 flex-1 px-2">Navbar Title</div>
<div class="hidden flex-none lg:block">
<ul class="menu menu-horizontal">
<!-- Navbar menu content here -->
<li><a>Navbar Item 1</a></li>
<li><a>Navbar Item 2</a></li>
</ul>
</div>
</div>
<!-- Page content here -->
Content
</div>
<div class="drawer-side">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
```
### Drawer with Right Side
```html
<div class="drawer drawer-end">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content here -->
<label for="my-drawer-2" class="btn btn-primary drawer-button">Open right drawer</label>
</div>
<div class="drawer-side">
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
```
## Features
- Can show/hide a sidebar on the left or right side of the page
- Responsive design that works on different screen sizes
- Uses a hidden checkbox to control visibility
- Dark overlay when drawer is open
- Can be opened on larger screens using responsive classes
- Works with existing navigation components
This component is useful for creating mobile-friendly navigation with collapsible sidebars, dashboards, or any layout that benefits from a sliding panel interface.