NavigationMenu

import { NavigationMenu } from '@pzeta/vue-components'
import type { MenuStructure, MenuGroup } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

interface MenuStructure {
  manifest: MFEManifest   // { name, version, icon?, description?, routes? }
  menuGroups: MenuGroup[]
}

interface MenuGroup {
  category: string        // nome della categoria/gruppo
  icon?: string
  items: MenuItem[]       // voci del gruppo (usano MenuItem standard)
}

<script setup lang="ts">
import { ref } from 'vue'
import { NavigationMenu } from '@pzeta/vue-components'

const nav = ref<InstanceType<typeof NavigationMenu> | null>(null)
</script>

<template>
  <button @click="nav?.expandAll()">Espandi tutto</button>
  <button @click="nav?.collapseAll()">Comprimi tutto</button>
  <NavigationMenu ref="nav" :menu-structure="menu" collapsible default-expand="modules" />
</template>

<script setup lang="ts">
import type { MenuStructure } from '@pzeta/vue-components'

const menuStructure: MenuStructure[] = [
  {
    manifest: { name: 'CRM', version: '1.0.0', icon: 'users' },
    menuGroups: [
      {
        category: 'Clienti',
        items: [
          { label: 'Anagrafiche', icon: 'address-book', to: '/crm/anagrafiche' },
          { label: 'Opportunità', icon: 'chart-line', to: '/crm/opportunita' },
        ],
      },
    ],
  },
  {
    manifest: { name: 'Fatturazione', version: '1.0.0', icon: 'file-invoice' },
    menuGroups: [
      {
        category: 'Documenti',
        items: [
          { label: 'Fatture', icon: 'file-invoice', to: '/fatturazione/fatture' },
          { label: 'Note credito', icon: 'file-minus', to: '/fatturazione/note-credito' },
        ],
      },
    ],
  },
]
</script>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { MenuStructure } from '@pzeta/vue-components'

const search = ref('')
const menuStructure: MenuStructure[] = [
  {
    manifest: { name: 'CRM', version: '2.0.0', icon: 'users', description: 'Gestione clienti' },
    menuGroups: [
      { category: 'Clienti', items: [
        { label: 'Lista Clienti', icon: 'list', to: '/crm/clienti', itemKey: 'crm-clients' },
        { label: 'Nuovo Cliente', icon: 'plus', to: '/crm/nuovo', itemKey: 'crm-new' },
      ] },
      { category: 'Opportunità', items: [
        { label: 'Pipeline', icon: 'filter', to: '/crm/pipeline', itemKey: 'crm-pipeline' },
      ] },
    ],
  },
]

// Filtro esterno: la libreria non conosce la ricerca, la esegue il consumer.
const filtered = computed<MenuStructure[]>(() => {
  const q = search.value.trim().toLowerCase()
  if (!q) return menuStructure
  return menuStructure
    .map((m) => ({
      ...m,
      menuGroups: m.menuGroups
        .map((g) => ({ ...g, items: g.items.filter((i) => i.label?.toLowerCase().includes(q)) }))
        .filter((g) => g.items.length > 0),
    }))
    .filter((m) => m.menuGroups.length > 0)
})
</script>

<template>
  <div class="w-64">
    <input v-model="search" placeholder="Cerca voce..." class="w-full mb-2 px-3 py-2 rounded-lg" />
    <NavigationMenu
      :menu-structure="filtered"
      collapsible
      persist-key="crm-nav"
      scroll-active-into-view
      :force-expanded="!!search.trim()"
      :highlight-query="search"
    />
  </div>
</template>

/* Esempio: accent verde brand su tutta l'app */
.my-app .hs-nav-menu {
  --hs-nav-accent: var(--color-success-500);
  --hs-nav-active-text: var(--color-success-700);
}

import type {
  NavigationMenuProps,
  NavigationMenuEmits,
  NavigationMenuSlots,
  MenuStructure,
  MenuGroup,
  MFEManifest,
} from '@pzeta/vue-components'