From 2153a9e22729e2f44b545ffae659a2a39e94ade1 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 6 Nov 2024 08:04:53 +1000
Subject: [PATCH 1/9] initial files + styles from shadcn

---
 package-lock.json                             | 142 +++---------------
 src/components/sidebar/Sidebar.vue            |  90 +++++++++++
 src/components/sidebar/SidebarContent.vue     |  17 +++
 src/components/sidebar/SidebarFooter.vue      |  17 +++
 src/components/sidebar/SidebarGroup.vue       |  17 +++
 src/components/sidebar/SidebarGroupAction.vue |  27 ++++
 .../sidebar/SidebarGroupContent.vue           |  17 +++
 src/components/sidebar/SidebarGroupLabel.vue  |  24 +++
 src/components/sidebar/SidebarHeader.vue      |  17 +++
 src/components/sidebar/SidebarInput.vue       |  21 +++
 src/components/sidebar/SidebarInset.vue       |  20 +++
 src/components/sidebar/SidebarMenu.vue        |  17 +++
 src/components/sidebar/SidebarMenuAction.vue  |  34 +++++
 src/components/sidebar/SidebarMenuBadge.vue   |  25 +++
 src/components/sidebar/SidebarMenuButton.vue  |  51 +++++++
 .../sidebar/SidebarMenuButtonChild.vue        |  33 ++++
 src/components/sidebar/SidebarMenuItem.vue    |  17 +++
 .../sidebar/SidebarMenuSkeleton.vue           |  33 ++++
 src/components/sidebar/SidebarMenuSub.vue     |  21 +++
 .../sidebar/SidebarMenuSubButton.vue          |  35 +++++
 src/components/sidebar/SidebarMenuSubItem.vue |   9 ++
 src/components/sidebar/SidebarProvider.vue    |  79 ++++++++++
 src/components/sidebar/SidebarRail.vue        |  32 ++++
 src/components/sidebar/SidebarSeparator.vue   |  18 +++
 src/components/sidebar/SidebarTrigger.vue     |  26 ++++
 src/components/sidebar/index.ts               |  51 +++++++
 src/components/sidebar/utils.ts               |  19 +++
 src/presets/styles.css                        |  20 +++
 28 files changed, 806 insertions(+), 123 deletions(-)
 create mode 100644 src/components/sidebar/Sidebar.vue
 create mode 100644 src/components/sidebar/SidebarContent.vue
 create mode 100644 src/components/sidebar/SidebarFooter.vue
 create mode 100644 src/components/sidebar/SidebarGroup.vue
 create mode 100644 src/components/sidebar/SidebarGroupAction.vue
 create mode 100644 src/components/sidebar/SidebarGroupContent.vue
 create mode 100644 src/components/sidebar/SidebarGroupLabel.vue
 create mode 100644 src/components/sidebar/SidebarHeader.vue
 create mode 100644 src/components/sidebar/SidebarInput.vue
 create mode 100644 src/components/sidebar/SidebarInset.vue
 create mode 100644 src/components/sidebar/SidebarMenu.vue
 create mode 100644 src/components/sidebar/SidebarMenuAction.vue
 create mode 100644 src/components/sidebar/SidebarMenuBadge.vue
 create mode 100644 src/components/sidebar/SidebarMenuButton.vue
 create mode 100644 src/components/sidebar/SidebarMenuButtonChild.vue
 create mode 100644 src/components/sidebar/SidebarMenuItem.vue
 create mode 100644 src/components/sidebar/SidebarMenuSkeleton.vue
 create mode 100644 src/components/sidebar/SidebarMenuSub.vue
 create mode 100644 src/components/sidebar/SidebarMenuSubButton.vue
 create mode 100644 src/components/sidebar/SidebarMenuSubItem.vue
 create mode 100644 src/components/sidebar/SidebarProvider.vue
 create mode 100644 src/components/sidebar/SidebarRail.vue
 create mode 100644 src/components/sidebar/SidebarSeparator.vue
 create mode 100644 src/components/sidebar/SidebarTrigger.vue
 create mode 100644 src/components/sidebar/index.ts
 create mode 100644 src/components/sidebar/utils.ts

diff --git a/package-lock.json b/package-lock.json
index 96e763f..94801ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -769,7 +768,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -786,7 +784,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -798,7 +795,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -809,14 +805,12 @@
     "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -833,7 +827,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -848,7 +841,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -865,7 +857,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -879,7 +870,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -888,7 +878,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -902,7 +891,6 @@
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -912,7 +900,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -925,7 +912,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -934,7 +920,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -947,7 +932,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -1709,6 +1693,7 @@
       "version": "10.11.1",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
       "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
         "@vueuse/metadata": "10.11.1",
@@ -1834,7 +1819,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1843,7 +1827,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1857,14 +1840,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1896,8 +1877,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -2092,8 +2072,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -2128,7 +2107,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -2158,7 +2136,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -2167,7 +2144,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -2281,7 +2257,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2353,7 +2328,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2377,7 +2351,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2475,7 +2448,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2486,8 +2458,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colorette": {
       "version": "2.0.20",
@@ -2541,7 +2512,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2555,7 +2525,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -2790,8 +2759,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
@@ -2808,8 +2776,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -2832,8 +2799,7 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
@@ -2854,8 +2820,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
@@ -3443,7 +3408,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -3459,7 +3423,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -3483,7 +3446,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -3537,7 +3499,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -3614,7 +3575,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -3630,7 +3590,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -3705,7 +3664,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -3719,7 +3677,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3845,7 +3802,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -4038,7 +3994,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4225,7 +4180,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -4277,7 +4231,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -4322,7 +4275,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4331,7 +4283,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4340,7 +4291,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -4380,7 +4330,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -4536,8 +4485,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/isstream": {
       "version": "0.1.2",
@@ -4549,7 +4497,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -4564,7 +4511,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4698,7 +4644,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -4706,8 +4651,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/listr2": {
       "version": "3.14.0",
@@ -4873,8 +4817,7 @@
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
     "node_modules/lucide-vue-next": {
       "version": "0.447.0",
@@ -4917,7 +4860,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -4926,7 +4868,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -4969,7 +4910,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -4993,7 +4933,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -5014,7 +4953,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -5081,7 +5019,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5314,7 +5251,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5323,7 +5259,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5462,8 +5397,7 @@
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
@@ -5518,7 +5452,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5526,14 +5459,12 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -5584,7 +5515,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -5608,7 +5538,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5617,7 +5546,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5662,7 +5590,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -5679,7 +5606,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -5698,7 +5624,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5733,7 +5658,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
       "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -5745,7 +5669,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5770,7 +5693,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5782,8 +5704,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/postcss/node_modules/nanoid": {
       "version": "3.3.7",
@@ -5996,7 +5917,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6037,7 +5957,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -6081,7 +6000,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -6120,7 +6038,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -6159,7 +6076,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -6228,7 +6144,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6365,7 +6280,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -6377,7 +6291,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6596,7 +6509,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -6611,7 +6523,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -6692,7 +6603,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -6705,7 +6615,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -6747,7 +6656,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -6769,7 +6677,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -6778,7 +6685,6 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^3.1.2",
@@ -6813,7 +6719,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6850,7 +6755,6 @@
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
       "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -6901,7 +6805,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -6910,7 +6813,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -6964,7 +6866,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -7008,8 +6909,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tslib": {
       "version": "2.8.1",
@@ -7135,7 +7035,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7430,8 +7330,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/uuid": {
       "version": "10.0.0",
@@ -7695,7 +7594,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7772,7 +7670,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -7804,7 +7701,6 @@
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
       "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
new file mode 100644
index 0000000..3f1b703
--- /dev/null
+++ b/src/components/sidebar/Sidebar.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Sheet from '@/components/sheet/Sheet.vue'
+import SheetContent from '@/components/sheet/SheetContent.vue'
+import { cn } from '@/lib/utils'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}>(), {
+  side: 'left',
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+})
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-mobile="true"
+      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else class="group peer hidden md:block"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="cn(
+        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+      )"
+    />
+    <div
+      :class="cn(
+        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
new file mode 100644
index 0000000..4b6244a
--- /dev/null
+++ b/src/components/sidebar/SidebarContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarFooter.vue b/src/components/sidebar/SidebarFooter.vue
new file mode 100644
index 0000000..9d145c0
--- /dev/null
+++ b/src/components/sidebar/SidebarFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarGroup.vue b/src/components/sidebar/SidebarGroup.vue
new file mode 100644
index 0000000..adc6843
--- /dev/null
+++ b/src/components/sidebar/SidebarGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarGroupAction.vue b/src/components/sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000..74cac4e
--- /dev/null
+++ b/src/components/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarGroupContent.vue b/src/components/sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000..37390c9
--- /dev/null
+++ b/src/components/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarGroupLabel.vue b/src/components/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000..83826c3
--- /dev/null
+++ b/src/components/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarHeader.vue b/src/components/sidebar/SidebarHeader.vue
new file mode 100644
index 0000000..eecaddb
--- /dev/null
+++ b/src/components/sidebar/SidebarHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarInput.vue b/src/components/sidebar/SidebarInput.vue
new file mode 100644
index 0000000..97a1f67
--- /dev/null
+++ b/src/components/sidebar/SidebarInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Input from '@/components/input/Input.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-sidebar="input"
+    :class="cn(
+      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+      props.class,
+    )"
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/src/components/sidebar/SidebarInset.vue b/src/components/sidebar/SidebarInset.vue
new file mode 100644
index 0000000..27d1db5
--- /dev/null
+++ b/src/components/sidebar/SidebarInset.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <main
+    :class="cn(
+      'relative flex min-h-svh flex-1 flex-col bg-background',
+      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>
diff --git a/src/components/sidebar/SidebarMenu.vue b/src/components/sidebar/SidebarMenu.vue
new file mode 100644
index 0000000..3bfd73e
--- /dev/null
+++ b/src/components/sidebar/SidebarMenu.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/src/components/sidebar/SidebarMenuAction.vue b/src/components/sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000..91a7d33
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-action"
+    :class="cn(
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot/>
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarMenuBadge.vue b/src/components/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000..f878968
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-badge"
+    :class="cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarMenuButton.vue b/src/components/sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000..312db7f
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Tooltip from '@/components/tooltip/Tooltip.vue'
+import TooltipContent from '@/components/tooltip/TooltipContent.vue'
+import TooltipTrigger from '@/components/tooltip/TooltipTrigger.vue'
+import { type Component, computed } from 'vue'
+import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string | Component
+}>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = computed(() => {
+  const { tooltip, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/src/components/sidebar/SidebarMenuButtonChild.vue b/src/components/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000..1d43866
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarMenuItem.vue b/src/components/sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000..b600073
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSkeleton.vue b/src/components/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000..54c9b72
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import Skeleton from '@/components/skeleton/Skeleton.vue'
+import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+})
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-skeleton"
+    :class="cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
+
+    <Skeleton
+      class="h-4 flex-1 max-w-[--skeleton-width]"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSub.vue b/src/components/sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000..0bb5af7
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-badge"
+    :class="cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSubButton.vue b/src/components/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000..0c63da1
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  size?: 'sm' | 'md'
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'a',
+  size: 'md',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSubItem.vue b/src/components/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000..b04030b
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
diff --git a/src/components/sidebar/SidebarProvider.vue b/src/components/sidebar/SidebarProvider.vue
new file mode 100644
index 0000000..8f06c67
--- /dev/null
+++ b/src/components/sidebar/SidebarProvider.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useEventListener, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'radix-vue'
+import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean
+  open?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  defaultOpen: true,
+  open: undefined,
+})
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = ref(false) // useIsMobile()
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => open.value ? 'expanded' : 'collapsed')
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/src/components/sidebar/SidebarRail.vue b/src/components/sidebar/SidebarRail.vue
new file mode 100644
index 0000000..9b644cd
--- /dev/null
+++ b/src/components/sidebar/SidebarRail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/src/components/sidebar/SidebarSeparator.vue b/src/components/sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000..25d51ba
--- /dev/null
+++ b/src/components/sidebar/SidebarSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Separator from '@/components/separator/Separator.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator
+    data-sidebar="separator"
+    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/src/components/sidebar/SidebarTrigger.vue b/src/components/sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000..cd29e95
--- /dev/null
+++ b/src/components/sidebar/SidebarTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Button from '@/components/button/Button.vue'
+import { cn } from '@/lib/utils'
+import { PanelLeft } from 'lucide-vue-next'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/src/components/sidebar/index.ts b/src/components/sidebar/index.ts
new file mode 100644
index 0000000..b137821
--- /dev/null
+++ b/src/components/sidebar/index.ts
@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/src/components/sidebar/utils.ts b/src/components/sidebar/utils.ts
new file mode 100644
index 0000000..3ded66c
--- /dev/null
+++ b/src/components/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'radix-vue'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/src/presets/styles.css b/src/presets/styles.css
index 63df063..5f935c3 100644
--- a/src/presets/styles.css
+++ b/src/presets/styles.css
@@ -29,4 +29,24 @@
   --ring: 215 20.2% 65.1%;
 
   --radius: 0.5rem;
+
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
+
+.dark {
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
\ No newline at end of file

From 07f003b4c3bdc87e7a091d514148e064f69f6889 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Fri, 8 Nov 2024 22:39:55 +1000
Subject: [PATCH 2/9] wip

---
 app/views/components/Sidebar.vue | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 app/views/components/Sidebar.vue

diff --git a/app/views/components/Sidebar.vue b/app/views/components/Sidebar.vue
new file mode 100644
index 0000000..40a9838
--- /dev/null
+++ b/app/views/components/Sidebar.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// Sidebar is currently a WIP with 1/2 parts merged. Will hold off on it for now
+// https://github.com/unovue/shadcn-vue/pull/827
+</script>
+
+<template></template>
+
+<style scoped></style>

From 5a655f282e3819768ea54d36080e9540f3a2f9ce Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 12 Nov 2024 13:20:33 +1000
Subject: [PATCH 3/9] wip it

---
 app/router.ts                                | 10 ++++++++++
 app/views/components/Sidebar.vue             | 17 +++++++++++++----
 app/views/index.ts                           |  1 +
 src/components/sidebar/SidebarInput.vue      |  2 +-
 src/components/sidebar/SidebarMenuAction.vue |  2 +-
 src/presets/preset.ts                        |  5 +++++
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/router.ts b/app/router.ts
index edabd71..62e282c 100644
--- a/app/router.ts
+++ b/app/router.ts
@@ -22,6 +22,7 @@ import {
   Select,
   Separator,
   Sheet,
+  Sidebar,
   Skeleton,
   Slider,
   Table,
@@ -219,6 +220,15 @@ const routes = [
           shadcn: true,
         },
       },
+      {
+        path: '/components/sidebar',
+        name: 'Sidebar',
+        component: Sidebar,
+        meta: {
+          layout: ComponentLayout,
+          shadcn: true,
+        },
+      },
       {
         path: '/components/skeleton',
         name: 'Skeleton',
diff --git a/app/views/components/Sidebar.vue b/app/views/components/Sidebar.vue
index 40a9838..e72401d 100644
--- a/app/views/components/Sidebar.vue
+++ b/app/views/components/Sidebar.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
-// Sidebar is currently a WIP with 1/2 parts merged. Will hold off on it for now
+// Sidebar is currently a WIP with 1/2 parts merged
 // https://github.com/unovue/shadcn-vue/pull/827
+// https://github.com/unovue/shadcn-vue/issues/805
+import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger } from '@/components/sidebar'
 </script>
 
-<template></template>
-
-<style scoped></style>
+<template>
+  <SidebarProvider>
+    <SidebarTrigger />
+    <Sidebar side="right" variant="floating">
+      <SidebarContent>
+        Some content
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
\ No newline at end of file
diff --git a/app/views/index.ts b/app/views/index.ts
index 390e4d1..0c1dc3b 100644
--- a/app/views/index.ts
+++ b/app/views/index.ts
@@ -20,6 +20,7 @@ export { default as RangeCalendar } from './components/RangeCalendar.vue'
 export { default as Select } from './components/Select.vue'
 export { default as Separator } from './components/Separator.vue'
 export { default as Sheet } from './components/Sheet.vue'
+export { default as Sidebar} from './components/Sidebar.vue'
 export { default as Skeleton } from './components/Skeleton.vue'
 export { default as Slider } from './components/Slider.vue'
 export { default as Table } from './components/Table.vue'
diff --git a/src/components/sidebar/SidebarInput.vue b/src/components/sidebar/SidebarInput.vue
index 97a1f67..3408298 100644
--- a/src/components/sidebar/SidebarInput.vue
+++ b/src/components/sidebar/SidebarInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Input from '@/components/input/Input.vue'
+import Input from '@/components/inputs/Input.vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
diff --git a/src/components/sidebar/SidebarMenuAction.vue b/src/components/sidebar/SidebarMenuAction.vue
index 91a7d33..c91295e 100644
--- a/src/components/sidebar/SidebarMenuAction.vue
+++ b/src/components/sidebar/SidebarMenuAction.vue
@@ -29,6 +29,6 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
   >
-    <slot/>
+    <slot />
   </Primitive>
 </template>
diff --git a/src/presets/preset.ts b/src/presets/preset.ts
index 9c401ac..cbe48f5 100644
--- a/src/presets/preset.ts
+++ b/src/presets/preset.ts
@@ -48,6 +48,11 @@ export default {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+        },
       },
       borderRadius: {
         xl: 'calc(var(--radius) + 4px)',

From b35fd8b9111224c1095453d18bd111c907c544f5 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 3 Dec 2024 12:48:13 +1000
Subject: [PATCH 4/9] add sidebar into main layout

---
 app/App.vue                                | 59 ++++++++++++----------
 app/layouts/MainLayout.vue                 |  2 +-
 src/components/sidebar/SidebarContent.vue  |  2 +-
 src/components/sidebar/SidebarProvider.vue |  6 +--
 src/presets/preset.ts                      |  2 +-
 src/presets/slate.css                      | 18 +++++++
 6 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/app/App.vue b/app/App.vue
index de1f9b6..8996076 100644
--- a/app/App.vue
+++ b/app/App.vue
@@ -2,30 +2,34 @@
 import router from './router'
 import { RouterLink, RouterView } from 'vue-router'
 import { LumuixModeToggle } from '@/components/lumuix'
+import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger } from '@/components/sidebar'
 
 const routes = router.getRoutes().filter((route) => route.children.length > 0)
 </script>
 
 <template>
-  <div>
-    <nav
-      id="nav-bar"
-      class="sticky top-0 z-10 flex h-fit w-full justify-between border-b border-slate-400 bg-background backdrop-blur dark:border-white">
-      <RouterLink to="/">
-        <img
-          src="/public/images/logo.png"
-          class="w-32"
-          alt="Lumuix Logo" />
-      </RouterLink>
-      <div class="text-primary my-auto mr-6 flex gap-2 font-bold">
-        <a href="https://github.com/SethSharp/lumuix"> 1.0.0-alpha.10.3 </a>
-        <LumuixModeToggle />
-      </div>
-    </nav>
-    <main>
-      <div class="flex">
-        <div class="h-screen w-1/4 bg-background">
-          <nav class="space-y-4 border-r border-slate-400 p-4 dark:border-white">
+  <div class="flex">
+    <SidebarProvider>
+      <SidebarTrigger class="mt-5" />
+
+      <Sidebar side="left" variant="sidebar">
+        <SidebarContent>
+          <RouterLink to="/">
+            <img
+              src="/public/images/logo.png"
+              class="w-full"
+              alt="Lumuix Logo" />
+          </RouterLink>
+
+          <div class="flex gap-1">
+            <SidebarTrigger />
+            <div class="text-primary m-auto flex gap-2 font-bold">
+              <a href="https://github.com/SethSharp/lumuix" class="my-auto"> 1.0.0-alpha.10.3 </a>
+              <LumuixModeToggle />
+            </div>
+          </div>
+
+          <div class="p-4">
             <div
               v-for="group in routes"
               :key="group.name">
@@ -50,14 +54,15 @@ const routes = router.getRoutes().filter((route) => route.children.length > 0)
                 </li>
               </ul>
             </div>
-          </nav>
-        </div>
-        <div class="w-3/4">
-          <component :is="$route.meta.layout">
-            <RouterView />
-          </component>
-        </div>
-      </div>
+          </div>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+
+    <main class="w-full">
+      <component :is="$route.meta.layout">
+        <RouterView />
+      </component>
     </main>
   </div>
 </template>
diff --git a/app/layouts/MainLayout.vue b/app/layouts/MainLayout.vue
index 2bc5e3d..aa1c04a 100644
--- a/app/layouts/MainLayout.vue
+++ b/app/layouts/MainLayout.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="space-y-2 p-6 leading-loose bg-background h-screen">
+  <div class="space-y-2 leading-loose bg-background pt-6 pr-12 h-screen w-full">
     <slot name="breadcrumbs" />
 
     <h1 class="text-3xl font-bold text-heading">{{ $route.name }}</h1>
diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
index 4b6244a..a2ae2dd 100644
--- a/src/components/sidebar/SidebarContent.vue
+++ b/src/components/sidebar/SidebarContent.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    :class="cn('flex min-h-0 flex-1 flex-col bg-sidebar gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/sidebar/SidebarProvider.vue b/src/components/sidebar/SidebarProvider.vue
index 8f06c67..d04bb11 100644
--- a/src/components/sidebar/SidebarProvider.vue
+++ b/src/components/sidebar/SidebarProvider.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { useEventListener, useVModel } from '@vueuse/core'
 import { TooltipProvider } from 'radix-vue'
+import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
 
 const props = withDefaults(defineProps<{
@@ -71,7 +71,7 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      :class="cn('group/sidebar-wrapper flex min-h-svh w-auto text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
     >
       <slot />
     </div>
diff --git a/src/presets/preset.ts b/src/presets/preset.ts
index 63fbc03..caf2652 100644
--- a/src/presets/preset.ts
+++ b/src/presets/preset.ts
@@ -64,7 +64,7 @@ export default {
         },
 
         sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
+          DEFAULT: 'hsl(var(--sidebar))',
           foreground: 'hsl(var(--sidebar-foreground))',
         },
       },
diff --git a/src/presets/slate.css b/src/presets/slate.css
index 2322c3b..585789b 100644
--- a/src/presets/slate.css
+++ b/src/presets/slate.css
@@ -39,9 +39,27 @@
   --ring: 215 20.2% 65.1%;
 
   --radius: 0.5rem;
+
+  --sidebar: 0 0% 100%; /* white */
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 .dark {
+  --sidebar: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+
   --background: 229 84% 5%; /* slate-950 */
   --foreground: 214 32% 91%;
 

From a5152f821086ee929f25116d6ea658164addc4bf Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 3 Dec 2024 12:49:06 +1000
Subject: [PATCH 5/9] formatting

---
 src/components/sidebar/Sidebar.vue            | 94 ++++++++++---------
 src/components/sidebar/SidebarContent.vue     |  8 +-
 src/components/sidebar/SidebarFooter.vue      |  3 +-
 src/components/sidebar/SidebarGroup.vue       |  3 +-
 src/components/sidebar/SidebarGroupAction.vue | 25 ++---
 .../sidebar/SidebarGroupContent.vue           |  3 +-
 src/components/sidebar/SidebarGroupLabel.vue  | 20 ++--
 src/components/sidebar/SidebarHeader.vue      |  3 +-
 src/components/sidebar/SidebarInput.vue       | 11 ++-
 src/components/sidebar/SidebarInset.vue       | 13 +--
 src/components/sidebar/SidebarMenu.vue        |  3 +-
 src/components/sidebar/SidebarMenuAction.vue  | 46 +++++----
 src/components/sidebar/SidebarMenuBadge.vue   | 21 +++--
 src/components/sidebar/SidebarMenuButton.vue  | 30 +++---
 .../sidebar/SidebarMenuButtonChild.vue        |  3 +-
 src/components/sidebar/SidebarMenuItem.vue    |  3 +-
 .../sidebar/SidebarMenuSkeleton.vue           | 13 +--
 src/components/sidebar/SidebarMenuSub.vue     | 13 +--
 .../sidebar/SidebarMenuSubButton.vue          | 40 ++++----
 src/components/sidebar/SidebarMenuSubItem.vue |  4 +-
 src/components/sidebar/SidebarProvider.vue    | 38 +++++---
 src/components/sidebar/SidebarRail.vue        | 23 ++---
 src/components/sidebar/SidebarSeparator.vue   |  3 +-
 src/components/sidebar/SidebarTrigger.vue     |  3 +-
 24 files changed, 235 insertions(+), 191 deletions(-)

diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 3f1b703..31e13fd 100644
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -9,16 +9,19 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<{
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-  class?: HTMLAttributes['class']
-}>(), {
-  side: 'left',
-  variant: 'sidebar',
-  collapsible: 'offcanvas',
-})
+const props = withDefaults(
+  defineProps<{
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas',
+  },
+)
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 </script>
@@ -26,21 +29,25 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 <template>
   <div
     v-if="collapsible === 'none'"
-    :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
-    v-bind="$attrs"
-  >
+    :class="
+      cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)
+    "
+    v-bind="$attrs">
     <slot />
   </div>
 
-  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+  <Sheet
+    v-else-if="isMobile"
+    :open="openMobile"
+    v-bind="$attrs"
+    @update:open="setOpenMobile">
     <SheetContent
       data-sidebar="sidebar"
       data-mobile="true"
       class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-      }"
-    >
+      }">
       <div class="flex h-full w-full flex-col">
         <slot />
       </div>
@@ -48,41 +55,42 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
   </Sheet>
 
   <div
-    v-else class="group peer hidden md:block"
+    v-else
+    class="group peer hidden md:block"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
-    :data-side="side"
-  >
+    :data-side="side">
     <!-- This is what handles the sidebar gap on desktop  -->
     <div
-      :class="cn(
-        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
-        'group-data-[collapsible=offcanvas]:w-0',
-        'group-data-[side=right]:rotate-180',
-        variant === 'floating' || variant === 'inset'
-          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
-      )"
-    />
+      :class="
+        cn(
+          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+        )
+      " />
     <div
-      :class="cn(
-        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
-        side === 'left'
-          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-        // Adjust the padding for floating and inset variants.
-        variant === 'floating' || variant === 'inset'
-          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-        props.class,
-      )"
-      v-bind="$attrs"
-    >
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class,
+        )
+      "
+      v-bind="$attrs">
       <div
         data-sidebar="sidebar"
-        class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-      >
+        class="group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow">
         <slot />
       </div>
     </div>
diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
index a2ae2dd..a57169e 100644
--- a/src/components/sidebar/SidebarContent.vue
+++ b/src/components/sidebar/SidebarContent.vue
@@ -10,8 +10,12 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col bg-sidebar gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
-  >
+    :class="
+      cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto bg-sidebar group-data-[collapsible=icon]:overflow-hidden',
+        props.class,
+      )
+    ">
     <slot />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarFooter.vue b/src/components/sidebar/SidebarFooter.vue
index 9d145c0..c99a399 100644
--- a/src/components/sidebar/SidebarFooter.vue
+++ b/src/components/sidebar/SidebarFooter.vue
@@ -10,8 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
+    :class="cn('flex flex-col gap-2 p-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarGroup.vue b/src/components/sidebar/SidebarGroup.vue
index adc6843..66d307b 100644
--- a/src/components/sidebar/SidebarGroup.vue
+++ b/src/components/sidebar/SidebarGroup.vue
@@ -10,8 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="group"
-    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
-  >
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarGroupAction.vue b/src/components/sidebar/SidebarGroupAction.vue
index 74cac4e..c1a8587 100644
--- a/src/components/sidebar/SidebarGroupAction.vue
+++ b/src/components/sidebar/SidebarGroupAction.vue
@@ -4,9 +4,11 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 </script>
 
 <template>
@@ -14,14 +16,15 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      // Increases the hit area of the button on mobile.
-      'after:absolute after:-inset-2 after:md:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
     <slot />
   </Primitive>
 </template>
diff --git a/src/components/sidebar/SidebarGroupContent.vue b/src/components/sidebar/SidebarGroupContent.vue
index 37390c9..966ce13 100644
--- a/src/components/sidebar/SidebarGroupContent.vue
+++ b/src/components/sidebar/SidebarGroupContent.vue
@@ -10,8 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
+    :class="cn('w-full text-sm', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarGroupLabel.vue b/src/components/sidebar/SidebarGroupLabel.vue
index 83826c3..4f42cf3 100644
--- a/src/components/sidebar/SidebarGroupLabel.vue
+++ b/src/components/sidebar/SidebarGroupLabel.vue
@@ -4,9 +4,11 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 </script>
 
 <template>
@@ -14,11 +16,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
-  >
+    :class="
+      cn(
+        'ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    ">
     <slot />
   </Primitive>
 </template>
diff --git a/src/components/sidebar/SidebarHeader.vue b/src/components/sidebar/SidebarHeader.vue
index eecaddb..64d7d29 100644
--- a/src/components/sidebar/SidebarHeader.vue
+++ b/src/components/sidebar/SidebarHeader.vue
@@ -10,8 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="header"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
+    :class="cn('flex flex-col gap-2 p-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarInput.vue b/src/components/sidebar/SidebarInput.vue
index 3408298..ea12427 100644
--- a/src/components/sidebar/SidebarInput.vue
+++ b/src/components/sidebar/SidebarInput.vue
@@ -11,11 +11,12 @@ const props = defineProps<{
 <template>
   <Input
     data-sidebar="input"
-    :class="cn(
-      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'focus-visible:ring-sidebar-ring h-8 w-full bg-background shadow-none focus-visible:ring-2',
+        props.class,
+      )
+    ">
     <slot />
   </Input>
 </template>
diff --git a/src/components/sidebar/SidebarInset.vue b/src/components/sidebar/SidebarInset.vue
index 27d1db5..b3b4809 100644
--- a/src/components/sidebar/SidebarInset.vue
+++ b/src/components/sidebar/SidebarInset.vue
@@ -9,12 +9,13 @@ const props = defineProps<{
 
 <template>
   <main
-    :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
-      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+      )
+    ">
     <slot />
   </main>
 </template>
diff --git a/src/components/sidebar/SidebarMenu.vue b/src/components/sidebar/SidebarMenu.vue
index 3bfd73e..48be487 100644
--- a/src/components/sidebar/SidebarMenu.vue
+++ b/src/components/sidebar/SidebarMenu.vue
@@ -10,8 +10,7 @@ const props = defineProps<{
 <template>
   <ul
     data-sidebar="menu"
-    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
-  >
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
     <slot />
   </ul>
 </template>
diff --git a/src/components/sidebar/SidebarMenuAction.vue b/src/components/sidebar/SidebarMenuAction.vue
index c91295e..d51b3cb 100644
--- a/src/components/sidebar/SidebarMenuAction.vue
+++ b/src/components/sidebar/SidebarMenuAction.vue
@@ -3,32 +3,38 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'button',
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'button',
+  },
+)
 </script>
 
 <template>
   <Primitive
     data-sidebar="menu-action"
-    :class="cn(
-      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-      // Increases the hit area of the button on mobile.
-      'after:absolute after:-inset-2 after:md:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
-    :as-child="asChild"
-  >
+    :as-child="asChild">
     <slot />
   </Primitive>
 </template>
diff --git a/src/components/sidebar/SidebarMenuBadge.vue b/src/components/sidebar/SidebarMenuBadge.vue
index f878968..e15993c 100644
--- a/src/components/sidebar/SidebarMenuBadge.vue
+++ b/src/components/sidebar/SidebarMenuBadge.vue
@@ -10,16 +10,17 @@ const props = defineProps<{
 <template>
   <div
     data-sidebar="menu-badge"
-    :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
     <slot />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarMenuButton.vue b/src/components/sidebar/SidebarMenuButton.vue
index 312db7f..640124c 100644
--- a/src/components/sidebar/SidebarMenuButton.vue
+++ b/src/components/sidebar/SidebarMenuButton.vue
@@ -10,13 +10,18 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component
+    }
+  >(),
+  {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+  },
+)
 
 const { isMobile, state } = useSidebar()
 
@@ -27,7 +32,9 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+  <SidebarMenuButtonChild
+    v-if="!tooltip"
+    v-bind="{ ...delegatedProps, ...$attrs }">
     <slot />
   </SidebarMenuButtonChild>
 
@@ -40,12 +47,13 @@ const delegatedProps = computed(() => {
     <TooltipContent
       side="right"
       align="center"
-      :hidden="state !== 'collapsed' || isMobile"
-    >
+      :hidden="state !== 'collapsed' || isMobile">
       <template v-if="typeof tooltip === 'string'">
         {{ tooltip }}
       </template>
-      <component :is="tooltip" v-else />
+      <component
+        :is="tooltip"
+        v-else />
     </TooltipContent>
   </Tooltip>
 </template>
diff --git a/src/components/sidebar/SidebarMenuButtonChild.vue b/src/components/sidebar/SidebarMenuButtonChild.vue
index 1d43866..963e9a7 100644
--- a/src/components/sidebar/SidebarMenuButtonChild.vue
+++ b/src/components/sidebar/SidebarMenuButtonChild.vue
@@ -26,8 +26,7 @@ const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
     :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
     :as="as"
     :as-child="asChild"
-    v-bind="$attrs"
-  >
+    v-bind="$attrs">
     <slot />
   </Primitive>
 </template>
diff --git a/src/components/sidebar/SidebarMenuItem.vue b/src/components/sidebar/SidebarMenuItem.vue
index b600073..bfb97e0 100644
--- a/src/components/sidebar/SidebarMenuItem.vue
+++ b/src/components/sidebar/SidebarMenuItem.vue
@@ -10,8 +10,7 @@ const props = defineProps<{
 <template>
   <li
     data-sidebar="menu-item"
-    :class="cn('group/menu-item relative', props.class)"
-  >
+    :class="cn('group/menu-item relative', props.class)">
     <slot />
   </li>
 </template>
diff --git a/src/components/sidebar/SidebarMenuSkeleton.vue b/src/components/sidebar/SidebarMenuSkeleton.vue
index 54c9b72..4421169 100644
--- a/src/components/sidebar/SidebarMenuSkeleton.vue
+++ b/src/components/sidebar/SidebarMenuSkeleton.vue
@@ -9,25 +9,22 @@ const props = defineProps<{
 }>()
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`;
+  return `${Math.floor(Math.random() * 40) + 50}%`
 })
 </script>
 
 <template>
   <div
     data-sidebar="menu-skeleton"
-    :class="cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)"
-  >
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
     <Skeleton
       v-if="showIcon"
       class="size-4 rounded-md"
-      data-sidebar="menu-skeleton-icon"
-    />
+      data-sidebar="menu-skeleton-icon" />
 
     <Skeleton
-      class="h-4 flex-1 max-w-[--skeleton-width]"
+      class="h-4 max-w-[--skeleton-width] flex-1"
       data-sidebar="menu-skeleton-text"
-      :style="{ '--skeleton-width': width }"
-    />
+      :style="{ '--skeleton-width': width }" />
   </div>
 </template>
diff --git a/src/components/sidebar/SidebarMenuSub.vue b/src/components/sidebar/SidebarMenuSub.vue
index 0bb5af7..e7e6ccc 100644
--- a/src/components/sidebar/SidebarMenuSub.vue
+++ b/src/components/sidebar/SidebarMenuSub.vue
@@ -10,12 +10,13 @@ const props = defineProps<{
 <template>
   <ul
     data-sidebar="menu-badge"
-    :class="cn(
-      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
     <slot />
   </ul>
 </template>
diff --git a/src/components/sidebar/SidebarMenuSubButton.vue b/src/components/sidebar/SidebarMenuSubButton.vue
index 0c63da1..b3d82d9 100644
--- a/src/components/sidebar/SidebarMenuSubButton.vue
+++ b/src/components/sidebar/SidebarMenuSubButton.vue
@@ -4,14 +4,19 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'a',
-  size: 'md',
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: 'sm' | 'md'
+      isActive?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'a',
+    size: 'md',
+  },
+)
 </script>
 
 <template>
@@ -21,15 +26,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
     <slot />
   </Primitive>
 </template>
diff --git a/src/components/sidebar/SidebarMenuSubItem.vue b/src/components/sidebar/SidebarMenuSubItem.vue
index b04030b..fbc3fbf 100644
--- a/src/components/sidebar/SidebarMenuSubItem.vue
+++ b/src/components/sidebar/SidebarMenuSubItem.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <li>
diff --git a/src/components/sidebar/SidebarProvider.vue b/src/components/sidebar/SidebarProvider.vue
index d04bb11..91ef802 100644
--- a/src/components/sidebar/SidebarProvider.vue
+++ b/src/components/sidebar/SidebarProvider.vue
@@ -3,16 +3,26 @@ import { TooltipProvider } from 'radix-vue'
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
 import { cn } from '@/lib/utils'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils'
 
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  defaultOpen: true,
-  open: undefined,
-})
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean
+    open?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    defaultOpen: true,
+    open: undefined,
+  },
+)
 
 const emits = defineEmits<{
   'update:open': [open: boolean]
@@ -51,7 +61,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? 'expanded' : 'collapsed')
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
 
 provideSidebarContext({
   state,
@@ -71,8 +81,12 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper flex min-h-svh w-auto text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
-    >
+      :class="
+        cn(
+          'group/sidebar-wrapper flex min-h-svh w-auto text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar',
+          props.class,
+        )
+      ">
       <slot />
     </div>
   </TooltipProvider>
diff --git a/src/components/sidebar/SidebarRail.vue b/src/components/sidebar/SidebarRail.vue
index 9b644cd..2fe25d7 100644
--- a/src/components/sidebar/SidebarRail.vue
+++ b/src/components/sidebar/SidebarRail.vue
@@ -16,17 +16,18 @@ const { toggleSidebar } = useSidebar()
     aria-label="Toggle Sidebar"
     :tabindex="-1"
     title="Toggle Sidebar"
-    :class="cn(
-      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
-    @click="toggleSidebar"
-  >
+    :class="
+      cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class,
+      )
+    "
+    @click="toggleSidebar">
     <slot />
   </button>
 </template>
diff --git a/src/components/sidebar/SidebarSeparator.vue b/src/components/sidebar/SidebarSeparator.vue
index 25d51ba..b957a21 100644
--- a/src/components/sidebar/SidebarSeparator.vue
+++ b/src/components/sidebar/SidebarSeparator.vue
@@ -11,8 +11,7 @@ const props = defineProps<{
 <template>
   <Separator
     data-sidebar="separator"
-    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
-  >
+    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
     <slot />
   </Separator>
 </template>
diff --git a/src/components/sidebar/SidebarTrigger.vue b/src/components/sidebar/SidebarTrigger.vue
index cd29e95..7175d14 100644
--- a/src/components/sidebar/SidebarTrigger.vue
+++ b/src/components/sidebar/SidebarTrigger.vue
@@ -18,8 +18,7 @@ const { toggleSidebar } = useSidebar()
     variant="ghost"
     size="icon"
     :class="cn('h-7 w-7', props.class)"
-    @click="toggleSidebar"
-  >
+    @click="toggleSidebar">
     <PanelLeft />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>

From 07f2142ac561d4a6e0a73d349c55160740d9d9b4 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Thu, 5 Dec 2024 14:20:19 +1000
Subject: [PATCH 6/9] improvements to sidebar showcase across the app

- documentation and
- main app sidebar

also export sidebar components in index.ts
---
 app/App.vue                      | 86 +++++++++++++++++++++-----------
 app/router.ts                    |  2 +-
 app/views/components/Sidebar.vue | 65 ++++++++++++++++++++++--
 src/index.ts                     |  1 +
 4 files changed, 120 insertions(+), 34 deletions(-)

diff --git a/app/App.vue b/app/App.vue
index 8996076..d3a783b 100644
--- a/app/App.vue
+++ b/app/App.vue
@@ -1,8 +1,24 @@
 <script lang="ts" setup>
 import router from './router'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import { LumuixModeToggle } from '@/components/lumuix'
 import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger } from '@/components/sidebar'
+import {
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu, SidebarMenuButton,
+  SidebarMenuItem
+} from '@/components/sidebar'
+import { SidebarMenuSub, SidebarMenuSubItem } from '@'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
+
+const route = useRoute()
+const currentRoute = computed(() => route.path)
 
 const routes = router.getRoutes().filter((route) => route.children.length > 0)
 </script>
@@ -14,12 +30,14 @@ const routes = router.getRoutes().filter((route) => route.children.length > 0)
 
       <Sidebar side="left" variant="sidebar">
         <SidebarContent>
-          <RouterLink to="/">
-            <img
-              src="/public/images/logo.png"
-              class="w-full"
-              alt="Lumuix Logo" />
-          </RouterLink>
+          <SidebarHeader>
+            <RouterLink to="/">
+              <img
+                src="/public/images/logo.png"
+                class="w-full"
+                alt="Lumuix Logo" />
+            </RouterLink>
+          </SidebarHeader>
 
           <div class="flex gap-1">
             <SidebarTrigger />
@@ -29,32 +47,42 @@ const routes = router.getRoutes().filter((route) => route.children.length > 0)
             </div>
           </div>
 
-          <div class="p-4">
-            <div
+          <SidebarContent>
+            <SidebarGroup
               v-for="group in routes"
               :key="group.name">
-              <h3 class="text-lg font-medium text-heading">{{ group.name }}</h3>
 
-              <ul
-                role="list"
-                class="flex flex-1 flex-col py-2">
-                <li>
-                  <ul class="space-y-2">
-                    <li
-                      v-for="route in group.children"
-                      :key="route.name"
-                      class="flex items-center hover:underline">
-                      <RouterLink
-                        :to="route.path"
-                        class="px-2 text-text">
-                        {{ route.name }}
-                      </RouterLink>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </div>
-          </div>
+                <SidebarGroupContent>
+                  <SidebarMenu class="pl-1">
+                    <CollapsibleRoot default-open class="group/collapsible">
+                      <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                          <SidebarGroupLabel class="text-heading">{{ group.name }}</SidebarGroupLabel>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                          <SidebarMenuSub role="list">
+                            <SidebarMenuSubItem
+                              v-for="route in group.children"
+                              :key="route.name"
+                              class="hover:underline">
+                              <SidebarMenuSubItem>
+                                <SidebarMenuButton :is-active="currentRoute === route.path" as-child>
+                                  <RouterLink
+                                    :to="route.path"
+                                    class="text-text">
+                                    {{ route.name }}
+                                  </RouterLink>
+                                </SidebarMenuButton>
+                              </SidebarMenuSubItem>
+                            </SidebarMenuSubItem>
+                          </SidebarMenuSub>
+                        </CollapsibleContent>
+                      </SidebarMenuItem>
+                    </CollapsibleRoot>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
         </SidebarContent>
       </Sidebar>
     </SidebarProvider>
diff --git a/app/router.ts b/app/router.ts
index 4c7e743..afa6f05 100644
--- a/app/router.ts
+++ b/app/router.ts
@@ -308,7 +308,7 @@ const routes = [
 
 const router = createRouter({
   history: createWebHistory(),
-  linkActiveClass: '!font-medium underline',
+  linkActiveClass: '',
   routes,
 })
 
diff --git a/app/views/components/Sidebar.vue b/app/views/components/Sidebar.vue
index e72401d..732497d 100644
--- a/app/views/components/Sidebar.vue
+++ b/app/views/components/Sidebar.vue
@@ -1,16 +1,73 @@
 <script setup lang="ts">
+import { BlocksIcon, MoreHorizontal, PersonStanding, CheckCircle } from 'lucide-vue-next'
 // Sidebar is currently a WIP with 1/2 parts merged
 // https://github.com/unovue/shadcn-vue/pull/827
 // https://github.com/unovue/shadcn-vue/issues/805
-import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger } from '@/components/sidebar'
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarTrigger,
+  SidebarMenuAction,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarGroup, SidebarMenu, SidebarGroupContent, SidebarGroupLabel
+} from '@/components/sidebar'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/dropdown-menu'
+
+const projects = [
+  {
+    name: 'Lumuix',
+    icon: BlocksIcon
+  },
+  {
+    name: 'Portfolio',
+    icon: PersonStanding
+  },
+  {
+    name: 'Habit Tracker',
+    icon: CheckCircle
+  }
+]
 </script>
 
 <template>
-  <SidebarProvider>
+  <SidebarProvider :default-open="false">
     <SidebarTrigger />
-    <Sidebar side="right" variant="floating">
+    <Sidebar collapsible="icon" side="right" variant="sidebar">
       <SidebarContent>
-        Some content
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            Projects
+          </SidebarGroupLabel>
+          <SidebarMenu>
+            <SidebarGroupContent>
+              <SidebarMenuItem v-for="project in projects">
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }} </span>
+                  </a>
+                </SidebarMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <SidebarMenuAction>
+                      <MoreHorizontal />
+                    </SidebarMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="left" align="start">
+                    <DropdownMenuItem>
+                      <span>Edit Project</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <span>Delete Project</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarGroupContent>
+          </SidebarMenu>
+        </SidebarGroup>
       </SidebarContent>
     </Sidebar>
   </SidebarProvider>
diff --git a/src/index.ts b/src/index.ts
index c1e254f..7561be9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ export * from '@/components/range-calendar'
 export * from '@/components/select'
 export * from '@/components/separator'
 export * from '@/components/sheet'
+export * from '@/components/sidebar'
 export * from '@/components/skeleton'
 export * from '@/components/slider'
 export * from '@/components/table'

From 025b273911e7a3076f349887cf1cbf1f50413607 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Mon, 9 Dec 2024 13:09:10 +1000
Subject: [PATCH 7/9] improvements to main app sidebar

---
 app/App.vue                                  | 129 ++++++++++---------
 src/components/sidebar/SidebarMenuButton.vue |   6 +-
 2 files changed, 70 insertions(+), 65 deletions(-)

diff --git a/app/App.vue b/app/App.vue
index d3a783b..88fda6f 100644
--- a/app/App.vue
+++ b/app/App.vue
@@ -1,21 +1,26 @@
 <script lang="ts" setup>
-import router from './router'
-import { useRoute } from 'vue-router'
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { RouterLink, RouterView } from 'vue-router'
+import { ChevronDown, PanelLeft } from 'lucide-vue-next'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
+import router from './router'
 import { LumuixModeToggle } from '@/components/lumuix'
 import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger } from '@/components/sidebar'
 import {
   SidebarGroup,
-  SidebarGroupAction,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
-  SidebarMenu, SidebarMenuButton,
-  SidebarMenuItem
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarFooter,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarGroupAction
 } from '@/components/sidebar'
-import { SidebarMenuSub, SidebarMenuSubItem } from '@'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
+import {  SidebarRail } from '@'
 
 const route = useRoute()
 const currentRoute = computed(() => route.path)
@@ -26,68 +31,70 @@ const routes = router.getRoutes().filter((route) => route.children.length > 0)
 <template>
   <div class="flex">
     <SidebarProvider>
-      <SidebarTrigger class="mt-5" />
-
       <Sidebar side="left" variant="sidebar">
+        <SidebarHeader>
+          <RouterLink to="/">
+            <img
+              src="/public/images/logo.png"
+              class="w-full"
+              alt="Lumuix Logo" />
+          </RouterLink>
+        </SidebarHeader>
         <SidebarContent>
-          <SidebarHeader>
-            <RouterLink to="/">
-              <img
-                src="/public/images/logo.png"
-                class="w-full"
-                alt="Lumuix Logo" />
-            </RouterLink>
-          </SidebarHeader>
+          <SidebarGroup
+            v-for="group in routes"
+            :key="group.name">
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <CollapsibleRoot default-open class="group/collapsible">
+                    <SidebarMenuItem>
+                      <SidebarGroupLabel as-child class="text-heading">
+                        <CollapsibleTrigger>
+                          <SidebarMenuButton>
+                            {{ group.name }}
+                            <ChevronDown />
+                          </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                      </SidebarGroupLabel>
+                      <CollapsibleContent>
+                        <SidebarMenuSub role="list">
+                          <SidebarMenuSubItem
+                            v-for="route in group.children"
+                            :key="route.name"
+                            class="hover:underline">
+                            <SidebarMenuButton :is-active="currentRoute === route.path" as-child>
+                              <RouterLink
+                                :to="route.path"
+                                class="text-text">
+                                {{ route.name }}
+                              </RouterLink>
+                            </SidebarMenuButton>
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </CollapsibleRoot>
+                </SidebarMenu>
+              </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
 
-          <div class="flex gap-1">
-            <SidebarTrigger />
-            <div class="text-primary m-auto flex gap-2 font-bold">
-              <a href="https://github.com/SethSharp/lumuix" class="my-auto"> 1.0.0-alpha.10.3 </a>
-              <LumuixModeToggle />
-            </div>
+        <SidebarRail>
+          <div class="pl-10 py-3">
+            <PanelLeft />
           </div>
+        </SidebarRail>
 
-          <SidebarContent>
-            <SidebarGroup
-              v-for="group in routes"
-              :key="group.name">
-
-                <SidebarGroupContent>
-                  <SidebarMenu class="pl-1">
-                    <CollapsibleRoot default-open class="group/collapsible">
-                      <SidebarMenuItem>
-                        <CollapsibleTrigger asChild>
-                          <SidebarGroupLabel class="text-heading">{{ group.name }}</SidebarGroupLabel>
-                        </CollapsibleTrigger>
-                        <CollapsibleContent>
-                          <SidebarMenuSub role="list">
-                            <SidebarMenuSubItem
-                              v-for="route in group.children"
-                              :key="route.name"
-                              class="hover:underline">
-                              <SidebarMenuSubItem>
-                                <SidebarMenuButton :is-active="currentRoute === route.path" as-child>
-                                  <RouterLink
-                                    :to="route.path"
-                                    class="text-text">
-                                    {{ route.name }}
-                                  </RouterLink>
-                                </SidebarMenuButton>
-                              </SidebarMenuSubItem>
-                            </SidebarMenuSubItem>
-                          </SidebarMenuSub>
-                        </CollapsibleContent>
-                      </SidebarMenuItem>
-                    </CollapsibleRoot>
-                  </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
-          </SidebarContent>
-        </SidebarContent>
+        <SidebarFooter class="h-12 text-center">
+          <div class="text-primary m-auto flex gap-2 font-bold">
+            <a href="https://github.com/SethSharp/lumuix" class="my-auto"> 1.0.0-alpha.10.3 </a>
+            <LumuixModeToggle />
+          </div>
+        </SidebarFooter>
       </Sidebar>
     </SidebarProvider>
 
-    <main class="w-full">
+    <main class="w-full px-8 p-4">
       <component :is="$route.meta.layout">
         <RouterView />
       </component>
diff --git a/src/components/sidebar/SidebarMenuButton.vue b/src/components/sidebar/SidebarMenuButton.vue
index 640124c..1e18653 100644
--- a/src/components/sidebar/SidebarMenuButton.vue
+++ b/src/components/sidebar/SidebarMenuButton.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import Tooltip from '@/components/tooltip/Tooltip.vue'
-import TooltipContent from '@/components/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/components/tooltip/TooltipTrigger.vue'
 import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
+import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 
 defineOptions({
   inheritAttrs: false,

From d61478b02d790991e7ce82fb62f5c3a23cec906e Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Mon, 9 Dec 2024 13:09:59 +1000
Subject: [PATCH 8/9] wip

---
 src/components/sidebar/SidebarContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
index a57169e..926dd30 100644
--- a/src/components/sidebar/SidebarContent.vue
+++ b/src/components/sidebar/SidebarContent.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
     data-sidebar="content"
     :class="
       cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto bg-sidebar group-data-[collapsible=icon]:overflow-hidden',
+        'flex min-h-0 flex-1 flex-col overflow-auto bg-sidebar group-data-[collapsible=icon]:overflow-hidden',
         props.class,
       )
     ">

From 7cd2d5f2b58cf1d3fec395644b7405e19547a35d Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Mon, 9 Dec 2024 13:25:52 +1000
Subject: [PATCH 9/9] wip

---
 src/components/sidebar/SidebarMenuButton.vue      | 7 ++++++-
 src/components/sidebar/SidebarMenuButtonChild.vue | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/SidebarMenuButton.vue b/src/components/sidebar/SidebarMenuButton.vue
index 1e18653..abb4e64 100644
--- a/src/components/sidebar/SidebarMenuButton.vue
+++ b/src/components/sidebar/SidebarMenuButton.vue
@@ -2,6 +2,7 @@
 import { type Component, computed } from 'vue'
 import { useSidebar } from './utils'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
+import type { PrimitiveProps, AsTag } from 'radix-vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 
 defineOptions({
@@ -32,7 +33,11 @@ const delegatedProps = computed(() => {
 <template>
   <SidebarMenuButtonChild
     v-if="!tooltip"
-    v-bind="{ ...delegatedProps, ...$attrs }">
+    v-bind="{
+      ...delegatedProps,
+      ...$attrs,
+      as: props.as,
+    }">
     <slot />
   </SidebarMenuButtonChild>
 
diff --git a/src/components/sidebar/SidebarMenuButtonChild.vue b/src/components/sidebar/SidebarMenuButtonChild.vue
index 963e9a7..a0efa1f 100644
--- a/src/components/sidebar/SidebarMenuButtonChild.vue
+++ b/src/components/sidebar/SidebarMenuButtonChild.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type AsTag, Primitive, type PrimitiveProps } from 'radix-vue'
 import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
+  as?: AsTag
   variant?: SidebarMenuButtonVariants['variant']
   size?: SidebarMenuButtonVariants['size']
   isActive?: boolean