replace el-splitter with resizable components

src/components/NavMenu.vue

@@ -798,10 +798,11 @@
 
     .nav-menu-container {
         position: relative;
-        width: 240px;
+        width: 100%;
+        min-width: 64px;
         height: 100%;
         display: flex;
-        flex: 0 0 240px;
+        flex: 1 1 auto;
         flex-direction: column;
         align-items: stretch;
         justify-content: flex-start;
@@ -914,8 +915,7 @@
     }
 
     .nav-menu-container.is-collapsed {
-        width: 64px;
-        flex-basis: 64px;
+        width: 100%;
     }
 
     .nav-menu-container.is-collapsed .nav-menu :deep(.el-sub-menu__title > div) {

src/components/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,42 @@
+<script setup>
+    import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui';
+    import { GripVertical } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        id: { type: String, required: false },
+        hitAreaMargins: { type: Object, required: false },
+        tabindex: { type: Number, required: false },
+        disabled: { type: Boolean, required: false },
+        nonce: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false },
+        withHandle: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['dragging']);
+
+    const delegatedProps = reactiveOmit(props, 'class', 'withHandle');
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SplitterResizeHandle
+        data-slot="resizable-handle"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
+                props.class
+            )
+        ">
+        <template v-if="props.withHandle">
+            <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+                <slot>
+                    <GripVertical class="size-2.5" />
+                </slot>
+            </div>
+        </template>
+    </SplitterResizeHandle>
+</template>

src/components/ui/resizable/ResizablePanel.vue

@@ -0,0 +1,25 @@
+<script setup>
+    import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from 'reka-ui';
+
+    const props = defineProps({
+        collapsedSize: { type: Number, required: false },
+        collapsible: { type: Boolean, required: false },
+        defaultSize: { type: Number, required: false },
+        id: { type: String, required: false },
+        maxSize: { type: Number, required: false },
+        minSize: { type: Number, required: false },
+        order: { type: Number, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+    const emits = defineEmits(['collapse', 'expand', 'resize']);
+
+    const forwarded = useForwardPropsEmits(props, emits);
+    const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+    <SplitterPanel :ref="forwardRef" v-slot="slotProps" data-slot="resizable-panel" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </SplitterPanel>
+</template>

src/components/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,31 @@
+<script setup>
+    import { SplitterGroup, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        id: { type: [String, null], required: false },
+        autoSaveId: { type: [String, null], required: false },
+        direction: { type: String, required: true },
+        keyboardResizeBy: { type: [Number, null], required: false },
+        storage: { type: Object, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['layout']);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SplitterGroup
+        v-slot="slotProps"
+        data-slot="resizable-panel-group"
+        v-bind="forwarded"
+        :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)">
+        <slot v-bind="slotProps" />
+    </SplitterGroup>
+</template>

src/components/ui/resizable/index.js

@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue';
+export { default as ResizablePanel } from './ResizablePanel.vue';
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';