Nav

import { NeuNavComponent } from '@neural-ui/core/nav';
import type { NeuNavItem } from '@neural-ui/core/nav';

import { NeuNavComponent, NeuNavItem } from '@neural-ui/core/nav';

@Component({
  imports: [NeuNavComponent],
  template: `
    <div style="display: flex; height: 100vh">
      <neu-nav [items]="navItems" [collapsible]="true">
        <span neu-nav-brand>Mi App</span>
        <div neu-nav-footer>usuario@email.com</div>
      </neu-nav>
      <main><!-- contenido / content --></main>
    </div>
  `
})
export class AppComponent {
  readonly navItems: NeuNavItem[] = [
    // Nivel 1 — enlace interno / Level 1 — internal link
    { id: 'home', label: 'Inicio', icon: 'lucideHome', route: '/' },

    // Nivel 1 — enlace externo (nueva pestaña) / Level 1 — external link (new tab)
    { id: 'github', label: 'GitHub', icon: 'lucideGithub', href: 'https://github.com' },

    // Nivel 1 → Nivel 2 con subítem de nivel 3 / Level 1 → Level 2 with level-3 subitem
    {
      id: 'analytics',
      label: 'Analíticas',
      icon: 'lucideBarChart2',
      children: [
        // Nivel 2 — enlace interno / Level 2 — internal link
        { id: 'overview', label: 'Resumen', icon: 'lucideActivity', route: '/analytics' },
        // Nivel 2 → Nivel 3 / Level 2 → Level 3
        {
          id: 'reports',
          label: 'Informes',
          icon: 'lucideFileText',
          children: [
            // Nivel 3 — enlace interno / Level 3 — internal link
            { id: 'monthly', label: 'Mensual', icon: 'lucideCalendar', route: '/analytics/monthly' },
            // Nivel 3 — enlace externo / Level 3 — external link
            { id: 'export', label: 'Exportar', icon: 'lucideDownload', href: 'https://sheets.google.com' },
          ],
        },
      ],
    },

    // Nivel 1 — con badge y deshabilitado / Level 1 — with badge and disabled
    { id: 'settings', label: 'Ajustes', icon: 'lucideSettings', route: '/settings',
      badge: 'New', badgeVariant: 'success', disabled: false },
  ];
}