53 lines
1.8 KiB
TypeScript
53 lines
1.8 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;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-secondarymenu-container">
|
||
|
|
<dees-appui-secondarymenu
|
||
|
|
.heading=${'Projects'}
|
||
|
|
.groups=${[
|
||
|
|
{
|
||
|
|
name: 'Active',
|
||
|
|
iconName: 'lucide:folder',
|
||
|
|
items: [
|
||
|
|
{ key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
|
||
|
|
{ key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
|
||
|
|
{ key: 'Database', iconName: 'database', action: () => console.log('Database') },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Archived',
|
||
|
|
iconName: 'lucide:archive',
|
||
|
|
collapsed: true,
|
||
|
|
items: [
|
||
|
|
{ key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
|
||
|
|
{ key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Settings',
|
||
|
|
iconName: 'lucide:settings',
|
||
|
|
items: [
|
||
|
|
{ key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
|
||
|
|
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
] as interfaces.ISecondaryMenuGroup[]}
|
||
|
|
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
|
||
|
|
></dees-appui-secondarymenu>
|
||
|
|
<div class="spacer"></div>
|
||
|
|
</div>
|
||
|
|
`;
|