51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
export const demoFunc = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-mainmenu-container {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
background: #1a1a1a;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
.demo-mainmenu-container .spacer {
|
||
|
|
flex: 1;
|
||
|
|
background: #0f0f0f;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-mainmenu-container">
|
||
|
|
<dees-appui-mainmenu
|
||
|
|
.logoIcon=${'lucide:box'}
|
||
|
|
.logoText=${'Acme App'}
|
||
|
|
.menuGroups=${[
|
||
|
|
{
|
||
|
|
tabs: [
|
||
|
|
{ key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
|
||
|
|
{ key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Workspace',
|
||
|
|
tabs: [
|
||
|
|
{ key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
|
||
|
|
{ key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
|
||
|
|
{ key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Analytics',
|
||
|
|
tabs: [
|
||
|
|
{ key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
|
||
|
|
{ key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
.bottomTabs=${[
|
||
|
|
{ key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
|
||
|
|
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
|
||
|
|
]}
|
||
|
|
></dees-appui-mainmenu>
|
||
|
|
<div class="spacer"></div>
|
||
|
|
</div>
|
||
|
|
`;
|