<template>
  <UDashboardSidebar collapsible resizable :ui="{ footer: 'border-t border-default' }">
    <template #header>
      <AppUser class="w-full" />
    </template>

    <template #default="{ collapsed }">
      <UNavigationMenu :collapsed="collapsed" :items="items" orientation="vertical" />
    </template>

    <template #footer>
      <UiLogout class="w-full" />
    </template>
  </UDashboardSidebar>
</template>

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

const route = useRoute();

const capitalise = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

const items = computed<NavigationMenuItem[]>(() => {
  const items: { label?: string; path: string; icon: string }[] = [
    { path: 'dashboard', icon: 'i-lucide-layout-dashboard' },
    { path: 'projects', icon: 'i-lucide-folder' },
    { path: 'tasks', icon: 'i-lucide-circle-check' },
    { path: 'reports', icon: 'i-lucide-chart-no-axes-column' },
    { path: 'settings', icon: 'i-lucide-settings' },
  ];
  return items.map(({ label, path, icon }) => ({
    icon,
    to: `/${path}`,
    active: route.path === `/${path}`,
    label: label ?? capitalise(path),
  }));
});
</script>
