Complete 1 fase docs components
This commit is contained in:
760
docs/components/menu.md
Normal file
760
docs/components/menu.md
Normal file
@@ -0,0 +1,760 @@
|
||||
# Menu
|
||||
|
||||
Menu component for creating navigation menus, sidebars, and dropdowns with support for nested items, icons, and active states.
|
||||
|
||||
## Tag
|
||||
|
||||
`Menu`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `items` | `Array<MenuItem>` | `[]` | Menu items configuration |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### MenuItem Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Menu item text or content |
|
||||
| `icon` | `string \| VNode` | Optional icon to display |
|
||||
| `active` | `boolean \| Signal<boolean>` | Active state highlighting |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `children` | `Array<MenuItem>` | Nested submenu items |
|
||||
| `open` | `boolean` | Whether submenu is open (for nested items) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
active: () => activeItem() === 'about',
|
||||
onclick: () => activeItem('about')
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
active: () => activeItem() === 'contact',
|
||||
onclick: () => activeItem('contact')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
icon: '🏠',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Analytics',
|
||||
active: () => activeItem() === 'analytics',
|
||||
onclick: () => activeItem('analytics')
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
active: () => activeItem() === 'settings',
|
||||
onclick: () => activeItem('settings')
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'Profile',
|
||||
active: () => activeItem() === 'profile',
|
||||
onclick: () => activeItem('profile')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Nested Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-nested" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const NestedDemo = () => {
|
||||
const activeItem = $('products');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
onclick: () => activeItem('dashboard'),
|
||||
active: () => activeItem() === 'dashboard'
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
icon: '📦',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
label: 'All Products',
|
||||
onclick: () => activeItem('all-products'),
|
||||
active: () => activeItem() === 'all-products'
|
||||
},
|
||||
{
|
||||
label: 'Add New',
|
||||
onclick: () => activeItem('add-product'),
|
||||
active: () => activeItem() === 'add-product'
|
||||
},
|
||||
{
|
||||
label: 'Categories',
|
||||
children: [
|
||||
{
|
||||
label: 'Electronics',
|
||||
onclick: () => activeItem('electronics'),
|
||||
active: () => activeItem() === 'electronics'
|
||||
},
|
||||
{
|
||||
label: 'Clothing',
|
||||
onclick: () => activeItem('clothing'),
|
||||
active: () => activeItem() === 'clothing'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: '📋',
|
||||
onclick: () => activeItem('orders'),
|
||||
active: () => activeItem() === 'orders'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: '⚙️',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(NestedDemo, '#demo-nested');
|
||||
```
|
||||
|
||||
### Horizontal Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HorizontalDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
class: 'menu-horizontal rounded-box',
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
children: [
|
||||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||||
{ label: 'Books', onclick: () => activeItem('books') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
onclick: () => activeItem('about'),
|
||||
active: () => activeItem() === 'about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
onclick: () => activeItem('contact'),
|
||||
active: () => activeItem() === 'contact'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, '#demo-horizontal');
|
||||
```
|
||||
|
||||
### Sidebar Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-sidebar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SidebarDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex' }, [
|
||||
Div({ class: 'w-64' }, [
|
||||
Menu({
|
||||
class: 'rounded-box w-full',
|
||||
items: [
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Users',
|
||||
children: [
|
||||
{
|
||||
label: 'All Users',
|
||||
onclick: () => activeItem('all-users'),
|
||||
active: () => activeItem() === 'all-users'
|
||||
},
|
||||
{
|
||||
label: 'Add User',
|
||||
onclick: () => activeItem('add-user'),
|
||||
active: () => activeItem() === 'add-user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
label: 'Files',
|
||||
onclick: () => activeItem('files'),
|
||||
active: () => activeItem() === 'files'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SidebarDemo, '#demo-sidebar');
|
||||
```
|
||||
|
||||
### Account Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-account" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AccountDemo = () => {
|
||||
const [notifications, setNotifications] = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
badge: '3',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
setNotifications(0);
|
||||
Toast('Notifications cleared', 'alert-success', 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🚪',
|
||||
label: 'Logout',
|
||||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(AccountDemo, '#demo-account');
|
||||
```
|
||||
|
||||
### Collapsible Sidebar
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-collapsible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CollapsibleDemo = () => {
|
||||
const collapsed = $(false);
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex gap-4' }, [
|
||||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||||
onclick: () => collapsed(!collapsed())
|
||||
}, collapsed() ? '→' : '←'),
|
||||
Menu({
|
||||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||||
items: [
|
||||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CollapsibleDemo, '#demo-collapsible');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Item 1' },
|
||||
{ label: 'Item 2' },
|
||||
{ label: 'Item 3', children: [
|
||||
{ label: 'Subitem 1' },
|
||||
{ label: 'Subitem 2' }
|
||||
]}
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||||
Menu({ items })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||||
Menu({ items, class: 'menu-compact' })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||||
Menu({ items, class: 'shadow-lg' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initMenuExamples = () => {
|
||||
|
||||
// 1. Basic Menu
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
active: () => activeItem() === 'about',
|
||||
onclick: () => activeItem('about')
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
active: () => activeItem() === 'contact',
|
||||
onclick: () => activeItem('contact')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
icon: '🏠',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Analytics',
|
||||
active: () => activeItem() === 'analytics',
|
||||
onclick: () => activeItem('analytics')
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
active: () => activeItem() === 'settings',
|
||||
onclick: () => activeItem('settings')
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'Profile',
|
||||
active: () => activeItem() === 'profile',
|
||||
onclick: () => activeItem('profile')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Nested Menu
|
||||
const nestedTarget = document.querySelector('#demo-nested');
|
||||
if (nestedTarget && !nestedTarget.hasChildNodes()) {
|
||||
const NestedDemo = () => {
|
||||
const activeItem = $('products');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
onclick: () => activeItem('dashboard'),
|
||||
active: () => activeItem() === 'dashboard'
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
icon: '📦',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
label: 'All Products',
|
||||
onclick: () => activeItem('all-products'),
|
||||
active: () => activeItem() === 'all-products'
|
||||
},
|
||||
{
|
||||
label: 'Add New',
|
||||
onclick: () => activeItem('add-product'),
|
||||
active: () => activeItem() === 'add-product'
|
||||
},
|
||||
{
|
||||
label: 'Categories',
|
||||
children: [
|
||||
{
|
||||
label: 'Electronics',
|
||||
onclick: () => activeItem('electronics'),
|
||||
active: () => activeItem() === 'electronics'
|
||||
},
|
||||
{
|
||||
label: 'Clothing',
|
||||
onclick: () => activeItem('clothing'),
|
||||
active: () => activeItem() === 'clothing'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: '📋',
|
||||
onclick: () => activeItem('orders'),
|
||||
active: () => activeItem() === 'orders'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: '⚙️',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(NestedDemo, nestedTarget);
|
||||
}
|
||||
|
||||
// 4. Horizontal Menu
|
||||
const horizontalTarget = document.querySelector('#demo-horizontal');
|
||||
if (horizontalTarget && !horizontalTarget.hasChildNodes()) {
|
||||
const HorizontalDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
class: 'menu-horizontal rounded-box',
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
children: [
|
||||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||||
{ label: 'Books', onclick: () => activeItem('books') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
onclick: () => activeItem('about'),
|
||||
active: () => activeItem() === 'about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
onclick: () => activeItem('contact'),
|
||||
active: () => activeItem() === 'contact'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, horizontalTarget);
|
||||
}
|
||||
|
||||
// 5. Sidebar Menu
|
||||
const sidebarTarget = document.querySelector('#demo-sidebar');
|
||||
if (sidebarTarget && !sidebarTarget.hasChildNodes()) {
|
||||
const SidebarDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex' }, [
|
||||
Div({ class: 'w-64' }, [
|
||||
Menu({
|
||||
class: 'rounded-box w-full',
|
||||
items: [
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Users',
|
||||
children: [
|
||||
{
|
||||
label: 'All Users',
|
||||
onclick: () => activeItem('all-users'),
|
||||
active: () => activeItem() === 'all-users'
|
||||
},
|
||||
{
|
||||
label: 'Add User',
|
||||
onclick: () => activeItem('add-user'),
|
||||
active: () => activeItem() === 'add-user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
label: 'Files',
|
||||
onclick: () => activeItem('files'),
|
||||
active: () => activeItem() === 'files'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SidebarDemo, sidebarTarget);
|
||||
}
|
||||
|
||||
// 6. Account Menu
|
||||
const accountTarget = document.querySelector('#demo-account');
|
||||
if (accountTarget && !accountTarget.hasChildNodes()) {
|
||||
const AccountDemo = () => {
|
||||
const [notifications, setNotifications] = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
badge: '3',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
setNotifications(0);
|
||||
Toast('Notifications cleared', 'alert-success', 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🚪',
|
||||
label: 'Logout',
|
||||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(AccountDemo, accountTarget);
|
||||
}
|
||||
|
||||
// 7. Collapsible Sidebar
|
||||
const collapsibleTarget = document.querySelector('#demo-collapsible');
|
||||
if (collapsibleTarget && !collapsibleTarget.hasChildNodes()) {
|
||||
const CollapsibleDemo = () => {
|
||||
const collapsed = $(false);
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex gap-4' }, [
|
||||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||||
onclick: () => collapsed(!collapsed())
|
||||
}, collapsed() ? '→' : '←'),
|
||||
Menu({
|
||||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||||
items: [
|
||||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CollapsibleDemo, collapsibleTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Item 1' },
|
||||
{ label: 'Item 2' },
|
||||
{ label: 'Item 3', children: [
|
||||
{ label: 'Subitem 1' },
|
||||
{ label: 'Subitem 2' }
|
||||
]}
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||||
Menu({ items })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||||
Menu({ items, class: 'menu-compact' })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||||
Menu({ items, class: 'shadow-lg' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initMenuExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initMenuExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user