Fix: hide scrollbars in collapsing sidebar, mak separators visible, improve new sidebartrigger position

2025-10-22 16:51:28 +02:00
parent a539444485
commit 2131481a9e
4 changed files with 4 additions and 4 deletions
@@ -3,7 +3,7 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
 </script>

 <template>
-    <div class="flex aspect-square size-8 items-center justify-center">
+    <div class="flex aspect-square size-8 items-center justify-center group-data-[collapsible=icon]:opacity-0 transition-[opacity]">
        <AppLogoIcon />
    </div>
    <span
@@ -30,7 +30,7 @@ const page = usePage();

    <SidebarGroup class="px-2 py-0" v-for="group in groups">
        <SidebarSeparator
-            class="absolute mt-6 shrink transition-[opacity] opacity-0 group-data-[collapsible=icon]:opacity-100"
+            class="absolute mt-6 shrink transition-[opacity] opacity-0 group-data-[collapsible=icon]:opacity-100 w-4 bg-muted-foreground"
            style="width: calc(var(--spacing) * 4);" />
        <SidebarGroupLabel class="text-bold uppercase text-gray-400 mt-2 group-data-[collapsible=icon]:mt-2">
            {{ group.title }}
@@ -11,7 +11,7 @@ const props = defineProps<{
  <div
    data-slot="sidebar-content"
    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 gap-2 overflow-y-auto overflow-x-hidden', props.class)"
  >
    <slot />
  </div>
@@ -11,7 +11,7 @@ const props = defineProps<{
  <div
    data-slot="sidebar-footer"
    data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
+    :class="cn('flex flex-col gap-2 p-2 overflow-x-hidden', props.class)"
  >
    <slot />
  </div>