40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<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>
|