114 lines
5.3 KiB
TypeScript
114 lines
5.3 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
import type * as interfaces from '../../interfaces/index.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
.demo-secondarymenu-container {
|
|
display: flex;
|
|
height: 100%;
|
|
background: #1a1a1a;
|
|
border-radius: 8px;
|
|
}
|
|
.demo-secondarymenu-container .spacer {
|
|
flex: 1;
|
|
background: #0f0f0f;
|
|
padding: 20px;
|
|
color: #a3a3a3;
|
|
font-family: 'Geist Sans', sans-serif;
|
|
}
|
|
.demo-secondarymenu-container .spacer h3 {
|
|
color: #fafafa;
|
|
margin-top: 0;
|
|
}
|
|
.demo-secondarymenu-container .spacer code {
|
|
background: #27272a;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.demo-secondarymenu-container .spacer ul {
|
|
line-height: 1.8;
|
|
}
|
|
</style>
|
|
<div class="demo-secondarymenu-container">
|
|
<dees-appui-secondarymenu
|
|
.heading=${'Projects'}
|
|
.groups=${[
|
|
// Group 1: Tab items (default behavior)
|
|
{
|
|
name: 'Navigation',
|
|
iconName: 'lucide:compass',
|
|
items: [
|
|
{ key: 'Dashboard', iconName: 'lucide:layoutDashboard', action: () => console.log('Dashboard clicked'), badge: 3, badgeVariant: 'warning' },
|
|
{ key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects clicked'), badge: 'new', badgeVariant: 'success' },
|
|
{ key: 'Analytics', iconName: 'lucide:barChart2', action: () => console.log('Analytics clicked') },
|
|
] as interfaces.ISecondaryMenuItemTab[]
|
|
},
|
|
// Group 2: Actions
|
|
{
|
|
name: 'Actions',
|
|
iconName: 'lucide:zap',
|
|
items: [
|
|
{ type: 'action', key: 'Create New', iconName: 'lucide:plus', action: () => alert('Create New clicked!') },
|
|
{ type: 'action', key: 'Import Data', iconName: 'lucide:upload', action: () => alert('Import Data clicked!') },
|
|
{ type: 'divider' },
|
|
{ type: 'action', key: 'Delete All', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Are you sure you want to delete all items?', action: () => alert('Deleted!') },
|
|
] as interfaces.ISecondaryMenuItem[]
|
|
},
|
|
// Group 3: Filters
|
|
{
|
|
name: 'Filters',
|
|
iconName: 'lucide:filter',
|
|
items: [
|
|
{ type: 'header', label: 'Status' },
|
|
{ type: 'filter', key: 'Show Active', iconName: 'lucide:checkCircle', active: true, onToggle: (active) => console.log('Show Active:', active) },
|
|
{ type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show Archived:', active) },
|
|
{ type: 'divider' },
|
|
{ type: 'multiFilter', key: 'Categories', iconName: 'lucide:tag', collapsed: false, options: [
|
|
{ key: 'frontend', label: 'Frontend', checked: true, iconName: 'lucide:monitor' },
|
|
{ key: 'backend', label: 'Backend', checked: true, iconName: 'lucide:server' },
|
|
{ key: 'devops', label: 'DevOps', checked: false, iconName: 'lucide:cloud' },
|
|
{ key: 'design', label: 'Design', checked: false, iconName: 'lucide:palette' },
|
|
], onChange: (keys) => console.log('Selected categories:', keys) },
|
|
] as interfaces.ISecondaryMenuItem[]
|
|
},
|
|
// Group 4: Links and misc
|
|
{
|
|
name: 'Resources',
|
|
iconName: 'lucide:bookOpen',
|
|
collapsed: true,
|
|
items: [
|
|
{ type: 'header', label: 'Documentation' },
|
|
{ type: 'link', key: 'API Reference', iconName: 'lucide:fileText', href: 'https://api.example.com/docs' },
|
|
{ type: 'link', key: 'User Guide', iconName: 'lucide:book', href: 'https://docs.example.com/guide' },
|
|
{ type: 'divider' },
|
|
{ type: 'header', label: 'Support' },
|
|
{ type: 'link', key: 'Help Center', iconName: 'lucide:helpCircle', href: '/help', external: false },
|
|
{ type: 'link', key: 'GitHub Issues', iconName: 'lucide:github', href: 'https://github.com/example/issues' },
|
|
] as interfaces.ISecondaryMenuItem[]
|
|
}
|
|
] as interfaces.ISecondaryMenuGroup[]}
|
|
@item-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
|
|
@action-click=${(e: CustomEvent) => console.log('Action clicked:', e.detail)}
|
|
@filter-toggle=${(e: CustomEvent) => console.log('Filter toggled:', e.detail)}
|
|
@multifilter-change=${(e: CustomEvent) => console.log('Multi-filter changed:', e.detail)}
|
|
@link-click=${(e: CustomEvent) => console.log('Link clicked:', e.detail)}
|
|
></dees-appui-secondarymenu>
|
|
<div class="spacer">
|
|
<h3>Secondary Menu Demo</h3>
|
|
<p>This demo showcases all 8 item types:</p>
|
|
<ul>
|
|
<li><code>tab</code> - Selectable items (Navigation group)</li>
|
|
<li><code>action</code> - Blue actions (Actions group)</li>
|
|
<li><code>action</code> with <code>variant: 'danger'</code> - Red danger action</li>
|
|
<li><code>filter</code> - Checkbox toggles (Filters group)</li>
|
|
<li><code>multiFilter</code> - Collapsible multi-select (Categories)</li>
|
|
<li><code>divider</code> - Visual separators</li>
|
|
<li><code>header</code> - Section labels</li>
|
|
<li><code>link</code> - External/internal links (Resources group)</li>
|
|
</ul>
|
|
<p>Try the collapse toggle on the left edge!</p>
|
|
</div>
|
|
</div>
|
|
`;
|