add table col width resize handle & fix sidebar custom width issue

src/components/ui/data-table/DataTableLayout.vue

@@ -20,9 +20,12 @@
                                     <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
                                     <div
                                         v-if="header.column.getCanResize?.()"
-                                        class="absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none"
+                                        class="absolute right-0 top-0 h-full w-2 cursor-col-resize touch-none select-none opacity-0 transition-opacity group-hover:opacity-100"
                                         @mousedown.stop="header.getResizeHandler?.()($event)"
-                                        @touchstart.stop="header.getResizeHandler?.()($event)" />
+                                        @touchstart.stop="header.getResizeHandler?.()($event)">
+                                        <div
+                                            class="absolute right-0 top-0 h-full w-px bg-border dark:bg-border dark:brightness-[2]" />
+                                    </div>
                                 </template>
                             </TableHead>
                         </TableRow>
@@ -224,7 +227,7 @@
         const columnDef = header?.column?.columnDef;
         const meta = columnDef?.meta ?? {};
         return joinClasses(
-            'sticky top-0 z-10 bg-background relative',
+            'sticky top-0 z-10 bg-background relative group',
             isSpacer(header.column) && 'p-0',
             resolveClassValue(meta.class, header?.getContext?.()),
             resolveClassValue(meta.headerClass, header?.getContext?.()),

src/composables/useAuthenticatedLayoutResizable.js

@@ -39,7 +39,23 @@ export function useAuthenticatedLayoutResizable() {
         return Number.isFinite(width) && width > 0 ? width : fallbackWidth;
     };
 
-    const setIsDragging = (isDragging) => {
+    const resolveDraggingPayload = (payload) => {
+        if (typeof payload === 'boolean') {
+            return payload;
+        }
+        if (payload && typeof payload === 'object') {
+            if (typeof payload.detail === 'boolean') {
+                return payload.detail;
+            }
+            if (typeof payload.dragging === 'boolean') {
+                return payload.dragging;
+            }
+        }
+        return Boolean(payload);
+    };
+
+    const setIsDragging = (payload) => {
+        const isDragging = resolveDraggingPayload(payload);
         const next = draggingCount.value + (isDragging ? 1 : -1);
         draggingCount.value = Math.max(0, next);
     };

src/views/Layout/AuthenticatedLayout.vue

@@ -9,7 +9,10 @@
                 <ResizablePanel ref="navPanelRef" :min-size="navMinSize" :max-size="navMaxSize" :order="1">
                     <NavMenu></NavMenu>
                 </ResizablePanel>
-                <ResizableHandle :disabled="isNavCollapsed" class="opacity-0"></ResizableHandle>
+                <ResizableHandle
+                    :disabled="isNavCollapsed"
+                    class="opacity-0"
+                    @dragging="setIsDragging"></ResizableHandle>
                 <ResizablePanel :default-size="mainDefaultSize" :order="2">
                     <RouterView v-slot="{ Component }">
                         <KeepAlive exclude="Charts">
@@ -24,7 +27,8 @@
                         :class="[
                             isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
                             'z-20 [&>div]:-translate-x-1/2'
-                        ]"></ResizableHandle>
+                        ]"
+                        @dragging="setIsDragging"></ResizableHandle>
                     <ResizablePanel
                         ref="asidePanelRef"
                         :default-size="asideDefaultSize"
@@ -119,6 +123,7 @@
         asideMaxSize,
         mainDefaultSize,
         handleLayout,
+        setIsDragging,
         isAsideCollapsed,
         isNavCollapsed,
         isSideBarTabShow