<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const nav : NavigationMenuItem[][] = [[
  {
  label: 'Home',
  icon: 'i-lucide-house',
  to: "/dashboard"
}, {
  label: 'Notifications',
  icon: 'solar:chat-round-unread-outline',
  badge: '4',
  to: "/events"
}, {
  label: 'Settings',
  icon: 'i-lucide-settings',
  //to: '/settings',
  children: [
    {
      label: "General",
      icon: "solar:settings-minimalistic-broken",
      to: "/settings",
    },
    {
      label: "Profile",
      icon: "solar:user-broken",
      to: "/settings/profile"
    },
    {
      label: "Theme",
      icon: "solar:pallete-2-broken",
      to: "/settings/theme"
    },
  ],
  }]
];
/*[
  {
    label: "Feedback"
  }
]];*/

// set color
/*useHead({
  bodyAttrs: {
    class: "ui-blue"
  }
})*/
onMounted(() => {
  ui_color_cookie();
})

</script>
<template>
  <UDashboardGroup>
    <DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
    
    <UDashboardSidebarCollapse />

    <UContainer class="max-w-full overflow-auto">
      <!-- in my case I want the button to be the same everywhere.
      if you wanna customize it per page, place it per page inside UContainer -->
      <!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->
      <slot />
    </UContainer>
  </UDashboardGroup>
</template>
