dees-catalog/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts

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>
`;