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

function adaptMenu(menu) {
  for (const item of menu) {
    if (item.children && item.children.length > 0) {
      adaptMenu(item.children);
      // item.children.unshift({ label: item.label, icon: 'i-lucide-book-open', popover: item.label ,to: { name: 'category', params: item.params }})
      // item.type = 'trigger'
      // item.icon = 'i-lucide-book-open'
      // item.onSelect(e){ console.log(e, 'adasdasdas'); }
    } else {
      // console.log(item.params);
      item.to = { name: 'category', params: item.params };
      item.icon = 'i-lucide-file-text'
    }
  }
  return menu;
}

menu = adaptMenu(menu.children)

console.log(menu);

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


</script>

<template>
  <div class="h-screen grid grid-rows-[auto_1fr_auto]">
    <main class="p-10">
      <div class="mt-24 bg-accented w-1/5 rounded-2xl">
        <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4">
        </UNavigationMenu>

      </div>
      <!-- <template #item>{{ item }}</template> -->
      

      <TopBar/>
      <slot></slot>
    </main>
  </div>
</template>
