feat(ui): basic layout

app/components/ui/sidebar.vue

@@ -0,0 +1,39 @@
+<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>