design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-appui): Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 16:16:25 +00:00
parent 888430d55a
commit 82b4afa95a
8 changed files with 135 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts Normal file
View File

@@ -0,0 +1,52 @@
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>
`;

53
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
View File

@@ -14,6 +14,7 @@ import {
css,
cssManager,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-appui-secondarymenu.demo.js';
/**
* Secondary navigation menu for sub-navigation within MainMenu views
@@ -21,51 +22,7 @@ import {
*/
@customElement('dees-appui-secondarymenu')
export class DeesAppuiSecondarymenu extends DeesElement {
public static demo = () => html`
<style>
.demo-container {
height: 500px;
display: flex;
background: #1a1a1a;
border-radius: 8px;
overflow: hidden;
}
</style>
<div class="demo-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>
`;
public static demo = demoFunc;
// INSTANCE
@@ -486,9 +443,6 @@ export class DeesAppuiSecondarymenu extends DeesElement {
public render(): TemplateResult {
return html`
<button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
<dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
</button>
<div class="maincontainer">
<div class="header">
<span class="heading">${this.heading}</span>
@@ -499,6 +453,9 @@ export class DeesAppuiSecondarymenu extends DeesElement {
: this.renderLegacyOptions()}
</div>
</div>
<button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
<dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
</button>
`;
}