fix(Sidebar): simplify resizable rail and fix collapsedSize handling

Author: mikenewbon

src/runtime/components/Sidebar.vue

@@ -92,7 +92,7 @@ export interface SidebarSlots {
   close?(props: { ui: Sidebar['ui'], state: SidebarState }): VNode[]
   default?(props: { state: SidebarState, open: boolean, close: () => void }): VNode[]
   footer?(props: { state: SidebarState, open: boolean, close: () => void }): VNode[]
-  rail?(props: { ui: Sidebar['ui'], state: SidebarState }): VNode[]
+  rail?(props: { ui: Sidebar['ui'], state: SidebarState, onMouseDown: (e: MouseEvent) => void, onTouchStart: (e: TouchEvent) => void, onDoubleClick: (e: MouseEvent) => void }): VNode[]
   content?(props: { close: () => void }): VNode[]
 }
 </script>
@@ -194,14 +194,16 @@ const canCollapse = computed(() => isResizable.value && props.collapsible !== 'n
 const sidebarId = `sidebar-${props.id || useId()}`
 const desktopCollapsed = ref(!modelOpen.value)
 
+const effectiveCollapsedSize = computed(() => props.collapsedSize ?? 4)
+
 const { el: containerEl, size: sidebarSize, isDragging, isCollapsed, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleDoubleClick, collapse } = useResizable(sidebarId, computed(() => ({
   side: props.side,
   minSize: props.minSize,
   maxSize: props.maxSize,
   defaultSize: props.defaultSize,
   resizable: isResizable.value,
   collapsible: canCollapse.value,
-  collapsedSize: props.collapsedSize ?? Math.max(0, props.minSize - 8),
+  collapsedSize: effectiveCollapsedSize.value,
   unit: 'rem' as const,
   persistent: true,
   storage: 'cookie' as const
@@ -212,27 +214,8 @@ if (!isMobile.value && canCollapse.value && isCollapsed.value) {
   modelOpen.value = false
 }
 
-// Track whether mousedown resulted in a drag (to distinguish click vs drag on the rail)
-let didDrag = false
-
-function onRailMouseDown(e: MouseEvent) {
-  didDrag = false
-  const startX = e.clientX
-  const onMove = (ev: MouseEvent) => {
-    if (Math.abs(ev.clientX - startX) > 3) didDrag = true
-  }
-  const onUp = () => {
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-  handleMouseDown(e)
-}
-
 function onRailClick() {
-  if (!isResizable.value) return (open.value = !open.value)
-  if (!didDrag && canCollapse.value) collapse(!isCollapsed.value)
+  if (!isResizable.value) open.value = !open.value
 }
 
 // Dynamic cursor: ew-resize (bidirectional) by default, directional at bounds
@@ -370,7 +353,7 @@ const menuProps = toRef(() => defu(props.menu, {
       :class="ui.root({ class: [uiProp?.root, props.class] })"
       :style="isResizable ? {
         '--sidebar-width': `${expandedWidth}rem`,
-        ...(props.collapsedSize && props.collapsible === 'icon' ? { '--sidebar-width-icon': `${props.collapsedSize}rem` } : {})
+        ...(props.collapsible === 'icon' ? { '--sidebar-width-icon': `${effectiveCollapsedSize}rem` } : {})
       } : undefined"
     >
       <!-- Gap spacer: reserves layout space for the fixed sidebar -->
@@ -389,16 +372,24 @@ const menuProps = toRef(() => defu(props.menu, {
       >
         <ReuseInnerTemplate />
 
-        <slot v-if="rail" name="rail" :state="state" :ui="ui">
+        <slot
+          v-if="rail"
+          name="rail"
+          :state="state"
+          :ui="ui"
+          :on-mouse-down="handleMouseDown"
+          :on-touch-start="handleTouchStart"
+          :on-double-click="handleDoubleClick"
+        >
           <button
             data-slot="rail"
             :data-state="state"
             :aria-label="t('sidebar.toggle')"
             :tabindex="-1"
             :class="ui.rail({ class: uiProp?.rail })"
             :style="railCursor ? { cursor: railCursor } : undefined"
-            @mousedown="isResizable ? onRailMouseDown($event) : undefined"
-            @touchstart="isResizable && !isCollapsed ? handleTouchStart($event) : undefined"
+            @mousedown="isResizable ? handleMouseDown($event) : undefined"
+            @touchstart="isResizable ? handleTouchStart($event) : undefined"
             @dblclick="isResizable ? handleDoubleClick($event) : undefined"
             @click="onRailClick"
           />

src/theme/sidebar.ts

@@ -2,7 +2,7 @@ import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    root: 'peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem]',
+    root: 'peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] data-[dragging=true]:select-none',
     gap: 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[dragging=true]/sidebar:!duration-0',
     container: 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out lg:flex group-data-[dragging=true]/sidebar:!duration-0',
     inner: 'flex size-full flex-col overflow-hidden divide-y divide-default',