<script setup lang="ts">
import { getMenu } from '@/router/menu'
import type { NavigationMenuItem } from '@nuxt/ui';
import { ref } from 'vue';
let menu = await getMenu() as NavigationMenuItem[]

const openAll = ref(false)

function adaptMenu(menu: NavigationMenuItem[]) {
  for (const item of menu) {
    if (item.children && item.children.length > 0) {
      console.log(item);
      adaptMenu(item.children);
      item.open = openAll.value
      item.children.unshift({ label: item.label, icon: 'i-lucide-book-open', popover: item.label, to: { name: 'category', params: item.params } })
    } else {
      item.to = { name: 'category', params: item.params };
      item.icon = 'i-lucide-file-text'
    }
  }
  return menu;
}

menu = adaptMenu(menu)

const items = ref<NavigationMenuItem[][]>([
  [
    ...menu as NavigationMenuItem[]
  ],

])
</script>

<template>
  <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4" />
</template>
