import { html, css } from '@design.estate/dees-element'; import type { DeesAppuiBase } from '../dees-appui-base/dees-appui-base.js'; import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js'; import type { ITab } from '../../interfaces/tab.js'; import type { ISelectionOption } from '../../interfaces/selectionoption.js'; import type { IMenuGroup } from '../../interfaces/menugroup.js'; import type { ISecondaryMenuGroup } from '../../interfaces/secondarymenu.js'; import * as plugins from '../../00plugins.js'; import '@design.estate/dees-wcctools/demotools'; export const demoFunc = () => { // Menu items for the appbar const menuItems: IAppBarMenuItem[] = [ { name: 'File', action: async () => {}, submenu: [ { name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New project') }, { name: 'Open Project...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open project') }, { name: 'Recent Projects', action: async () => {}, submenu: [ { name: 'my-app', action: async () => console.log('Open my-app') }, { name: 'component-lib', action: async () => console.log('Open component-lib') }, { name: 'api-server', action: async () => console.log('Open api-server') }, ]}, { divider: true }, { name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') }, { divider: true }, { name: 'Close Project', action: async () => console.log('Close project') }, ] }, { name: 'Edit', action: async () => {}, submenu: [ { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') }, { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') }, { divider: true }, { name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') }, { name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') }, { name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') }, ] }, { name: 'View', action: async () => {}, submenu: [ { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') }, { name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') }, { divider: true }, { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoomIn', action: async () => console.log('Zoom in') }, { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoomOut', action: async () => console.log('Zoom out') }, { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') }, ] }, { name: 'Help', action: async () => {}, submenu: [ { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') }, { name: 'Release Notes', iconName: 'fileText', action: async () => console.log('Release notes') }, { divider: true }, { name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') }, { name: 'About', iconName: 'info', action: async () => console.log('About') }, ] } ]; // Main menu groups (left sidebar) const mainMenuGroups: IMenuGroup[] = [ { tabs: [ { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') }, { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox selected') }, ] }, { name: 'Workspace', tabs: [ { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') }, { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks selected') }, { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents selected') }, ] }, { name: 'Analytics', tabs: [ { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports selected') }, { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights selected') }, ] } ]; // Main menu bottom tabs (pinned to bottom) const mainMenuBottomTabs: ITab[] = [ { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') }, { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') }, ]; // Secondary menu groups (second sidebar with collapsible groups) // These showcase the new shadcn-style design with badges and collapsible sections const secondaryMenuGroups: ISecondaryMenuGroup[] = [ { name: 'Quick Access', iconName: 'lucide:zap', items: [ { key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview selected') }, { key: 'Recent Activity', iconName: 'clock', action: () => console.log('Recent Activity selected'), badge: 5 }, { key: 'Favorites', iconName: 'star', action: () => console.log('Favorites selected') }, ] }, { name: 'Resources', iconName: 'lucide:layers', items: [ { key: 'Components', iconName: 'package', action: () => console.log('Components selected'), badge: 24 }, { key: 'Services', iconName: 'server', action: () => console.log('Services selected'), badge: 'new', badgeVariant: 'success' }, { key: 'APIs', iconName: 'globe', action: () => console.log('APIs selected'), badge: 3, badgeVariant: 'warning' }, { key: 'Webhooks', iconName: 'webhook', action: () => console.log('Webhooks selected') }, ] }, { name: 'Data Management', iconName: 'lucide:database', items: [ { key: 'Database', iconName: 'database', action: () => console.log('Database selected') }, { key: 'Storage', iconName: 'hardDrive', action: () => console.log('Storage selected'), badge: '85%', badgeVariant: 'warning' }, { key: 'Backups', iconName: 'archive', action: () => console.log('Backups selected'), badge: 'OK', badgeVariant: 'success' }, ] }, { name: 'System', iconName: 'lucide:settings', collapsed: true, items: [ { key: 'Configuration', iconName: 'sliders', action: () => console.log('Configuration selected') }, { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations selected'), badge: 2, badgeVariant: 'error' }, { key: 'Permissions', iconName: 'shield', action: () => console.log('Permissions selected') }, { key: 'Logs', iconName: 'fileText', action: () => console.log('Logs selected') }, ] } ]; // Main content tabs const mainContentTabs: ITab[] = [ { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details tab') }, { key: 'Logs', iconName: 'lucide:list', action: () => console.log('Logs tab') }, { key: 'Metrics', iconName: 'lucide:lineChart', action: () => console.log('Metrics tab') }, ]; // Profile menu items const profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [ { name: 'Profile Settings', iconName: 'user', action: async () => console.log('Profile settings') }, { name: 'Account', iconName: 'settings', action: async () => console.log('Account settings') }, { divider: true }, { name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') }, { name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+K', action: async () => console.log('Shortcuts') }, { divider: true }, { name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') } ]; return html`
console.log('Menu selected:', e.detail)} @appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)} @appbar-search-click=${() => console.log('Search clicked')} @appbar-user-menu-open=${() => console.log('User menu opened')} @appbar-profile-menu-select=${(e: CustomEvent) => console.log('Profile menu selected:', e.detail)} @mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)} @secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)} >

Welcome to Acme App

This demo showcases the AppUI component system with the new SecondaryMenu.

SecondaryMenu Features

  • Collapsible groups with smooth animations
  • Badge support (counts, status, variants)
  • Dynamic heading from MainMenu selection
  • shadcn-inspired modern design

Badge Variants

default success warning error

Try clicking items in the MainMenu (left) - the SecondaryMenu heading updates automatically. Click group headers in the SecondaryMenu to collapse/expand sections.

`; };