feat: ✨ Add sidebar style setting

components/sidebars/left-sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <Sidebar variant="inset" collapsible="icon">
+    <Sidebar :variant="(sidebarStyle.value as 'sidebar' | 'floating' | 'inset')" collapsible="icon">
         <SidebarHeader>
             <SidebarMenu>
                 <SidebarMenuItem>
@@ -119,10 +119,13 @@ import {
     SidebarMenuSubItem,
     SidebarRail,
 } from "~/components/ui/sidebar";
+import { type EnumSetting, SettingIds } from "~/settings";
 import Avatar from "../profiles/avatar.vue";
 import { Button } from "../ui/button";
 import AccountSwitcher from "./account-switcher.vue";
 
+const sidebarStyle = useSetting(SettingIds.SidebarStyle) as Ref<EnumSetting>;
+
 const data = {
     navMain: [
         {

settings.ts

@@ -82,6 +82,7 @@ export enum SettingIds {
     BackgroundURL = "background-url",
     NotificationsSidebar = "notifications-sidebar",
     AvatarShape = "avatar-shape",
+    SidebarStyle = "sidebar-style",
 }
 
 export const settings: Record<SettingIds, Setting> = {
@@ -93,6 +94,27 @@ export const settings: Record<SettingIds, Setting> = {
         page: SettingPages.Behaviour,
         notImplemented: true,
     } as BooleanSetting,
+    [SettingIds.SidebarStyle]: {
+        title: "Sidebar Style",
+        description: "Style of the left sidebar.",
+        type: SettingType.Enum,
+        value: "inset",
+        options: [
+            {
+                value: "inset",
+                label: "Inset",
+            },
+            {
+                value: "sidebar",
+                label: "Sidebar",
+            },
+            {
+                value: "floating",
+                label: "Floating",
+            },
+        ],
+        page: SettingPages.Appearance,
+    } as EnumSetting,
     [SettingIds.AvatarShape]: {
         title: "Avatar Shape",
         description: "Shape of all user avatars.",