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

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

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 }}

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>

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>