sidebar works

app/assets/css/global.css

@@ -1 +1,2 @@
 @import "tailwindcss";
+@import "@nuxt/ui";

app/components/sidebar.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const items: NavigationMenuItem[][] = [[{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-settings',
+  defaultOpen: true,
+  children: [{
+    label: 'General'
+  }, {
+    label: 'Members'
+  }, {
+    label: 'Notifications'
+  }]
+}], [{
+  label: 'Feedback',
+  icon: 'i-lucide-message-circle',
+  to: 'https://github.com/nuxt-ui-templates/dashboard',
+  target: '_blank'
+}, {
+  label: 'Help & Support',
+  icon: 'i-lucide-info',
+  to: 'https://github.com/nuxt/ui',
+  target: '_blank'
+}]]
+</script>
+
+<template>
+  <UDashboardSidebar collapsible resizable :ui="{ footer: 'border-t border-default' }">
+    <template #header="{ collapsed }">
+      <Logo v-if="!collapsed" class="h-5 w-auto shrink-0" />
+      <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
+    </template>
+
+    <template #default="{ collapsed }">
+      <UButton
+        :label="collapsed ? undefined : 'Search...'"
+        icon="i-lucide-search"
+        color="neutral"
+        variant="outline"
+        block
+        :square="collapsed"
+      >
+        <template v-if="!collapsed" #trailing>
+          <div class="flex items-center gap-0.5 ms-auto">
+            <UKbd value="meta" variant="subtle" />
+            <UKbd value="K" variant="subtle" />
+          </div>
+        </template>
+      </UButton>
+
+      <UNavigationMenu
+        :collapsed="collapsed"
+        :items="items[0]"
+        orientation="vertical"
+      />
+
+      <UNavigationMenu
+        :collapsed="collapsed"
+        :items="items[1]"
+        orientation="vertical"
+        class="mt-auto"
+      />
+    </template>
+
+    <template #footer="{ collapsed }">
+      <UButton
+        :avatar="{
+          src: 'https://github.com/benjamincanac.png'
+        }"
+        :label="collapsed ? undefined : 'Benjamin'"
+        color="neutral"
+        variant="ghost"
+        class="w-full"
+        :block="collapsed"
+      />
+    </template>
+  </UDashboardSidebar>
+</template>
+

app/layouts/dashboard.vue

@@ -0,0 +1,7 @@
+<template>
+  <UDashboardGroup>
+    <Sidebar />
+    
+    <slot />
+  </UDashboardGroup>
+</template>

app/pages/dashy.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+  definePageMeta({
+    layout: "dashboard"
+  });
+</script>
+
+<template>
+
+</template>
+<style>
+
+</style>