From 914a085e25a7c2af9c209ad853a9dd4ce8abc4d4 Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Wed, 22 Oct 2025 16:51:28 +0200
Subject: [PATCH] Fix: hide scrollbars in collapsing sidebar, mak separators
 visible, improve new sidebartrigger position

---
 resources/js/components/AppLogo.vue                   | 2 +-
 resources/js/components/NavMain.vue                   | 2 +-
 resources/js/components/ui/sidebar/SidebarContent.vue | 2 +-
 resources/js/components/ui/sidebar/SidebarFooter.vue  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index fef05e0..6f53f01 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -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
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index 21a4867..069701d 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -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 }}
diff --git a/resources/js/components/ui/sidebar/SidebarContent.vue b/resources/js/components/ui/sidebar/SidebarContent.vue
index 3b7536c..72214da 100644
--- a/resources/js/components/ui/sidebar/SidebarContent.vue
+++ b/resources/js/components/ui/sidebar/SidebarContent.vue
@@ -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>
diff --git a/resources/js/components/ui/sidebar/SidebarFooter.vue b/resources/js/components/ui/sidebar/SidebarFooter.vue
index c324dff..7616ee8 100644
--- a/resources/js/components/ui/sidebar/SidebarFooter.vue
+++ b/resources/js/components/ui/sidebar/SidebarFooter.vue
@@ -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>