From ac4bf4e210c932b55ea57bba3827edc469bd5d7c Mon Sep 17 00:00:00 2001
From: suricatingss <ts1227.gamer@gmail.com>
Date: Fri, 28 Nov 2025 22:15:01 +0000
Subject: [PATCH] sidebar works

---
 app/assets/css/global.css  |  3 +-
 app/components/sidebar.vue | 91 ++++++++++++++++++++++++++++++++++++++
 app/layouts/dashboard.vue  |  7 +++
 app/pages/dashy.vue        | 12 +++++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 app/components/sidebar.vue
 create mode 100644 app/layouts/dashboard.vue
 create mode 100644 app/pages/dashy.vue

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index a461c50..4119734 100644
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -1 +1,2 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+@import "@nuxt/ui";
\ No newline at end of file
diff --git a/app/components/sidebar.vue b/app/components/sidebar.vue
new file mode 100644
index 0000000..fc873ce
--- /dev/null
+++ b/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>
+
diff --git a/app/layouts/dashboard.vue b/app/layouts/dashboard.vue
new file mode 100644
index 0000000..bb87d88
--- /dev/null
+++ b/app/layouts/dashboard.vue
@@ -0,0 +1,7 @@
+<template>
+  <UDashboardGroup>
+    <Sidebar />
+    
+    <slot />
+  </UDashboardGroup>
+</template>
diff --git a/app/pages/dashy.vue b/app/pages/dashy.vue
new file mode 100644
index 0000000..ba728e4
--- /dev/null
+++ b/app/pages/dashy.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+  definePageMeta({
+    layout: "dashboard"
+  });
+</script>
+
+<template>
+
+</template>
+<style>
+
+</style>
\ No newline at end of file