refactor: ♻️ Improve sidebar and background design

components/ui/sidebar/Sidebar.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "vue";
-import Sheet from "~/components/ui/sheet/Sheet.vue";
-import SheetContent from "~/components/ui/sheet/SheetContent.vue";
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
 
 defineOptions({
     inheritAttrs: false,
@@ -22,76 +19,12 @@ const props = withDefaults(
         collapsible: "offcanvas",
     },
 );
-
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
 <template>
-  <aside
-    v-if="collapsible === 'none'"
-    :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
-    v-bind="$attrs"
-    data-component="sidebar"
-  >
-    <slot />
-  </aside>
-
-  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-    <SheetContent
-      data-sidebar="sidebar"
-      data-mobile="true"
-      :side="side"
-      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-      :style="{
-        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-      }"
-      as="aside"
-    >
-      <div class="flex h-full w-full flex-col">
+    <aside
+        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground p-1', props.class)"
+        v-bind="$attrs" data-component="sidebar">
         <slot />
-      </div>
-    </SheetContent>
-  </Sheet>
-
-  <aside
-    v-else class="group peer hidden md:block"
-    :data-state="state"
-    :data-collapsible="state === 'collapsed' ? collapsible : ''"
-    :data-variant="variant"
-    :data-side="side"
-    data-component="sidebar"
-  >
-    <!-- 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>
-  </aside>
+    </aside>
 </template>

components/ui/sidebar/SidebarInset.vue

@@ -7,24 +7,24 @@ const props = defineProps<{
     class?: HTMLAttributes["class"];
 }>();
 
-const backgroundImage = useSetting(SettingIds.BackgroundURL);
-
-const canParseUrl = URL.canParse;
+const bgSetting = useSetting(SettingIds.BackgroundURL);
+const bgImage = computed(() =>
+    bgSetting.value.value && URL.canParse(bgSetting.value.value as string)
+        ? bgSetting.value.value
+        : "/images/banner.webp",
+);
 </script>
 
 <template>
     <main :class="cn(
         'relative flex min-h-svh max-w-full 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]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        '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]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow bg-cover bg-center bg-no-repeat',
         props.class,
     )" :style="{
-        backgroundImage: canParseUrl(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
-        backgroundSize: canParseUrl(backgroundImage.value as string) ? 'cover' : undefined,
-        backgroundPosition: canParseUrl(backgroundImage.value as string) ? 'center' : undefined,
-        backgroundRepeat: canParseUrl(backgroundImage.value as string) ? 'no-repeat' : undefined,
+        backgroundImage: `url('${bgImage}')`,
     }">
         <!-- Overlay for the background image -->
-        <div v-if="canParseUrl(backgroundImage.value as string)" class="absolute -z-10 inset-0 bg-black/20" />
+        <div class="absolute -z-10 inset-0 bg-black/20" />
         <slot />
     </main>
 </template>

components/ui/sidebar/SidebarTrigger.vue

@@ -17,7 +17,7 @@ const { toggleSidebar } = useSidebar();
     data-sidebar="trigger"
     variant="ghost"
     size="icon"
-    :class="cn('h-7 w-7', props.class)"
+    :class="cn('size-7', props.class)"
     @click="toggleSidebar"
   >
     <PanelLeft />