use reka splitter config api

src/views/Layout/MainLayout.vue

@@ -16,8 +16,8 @@
 
             <SidebarInset class="min-w-0 bg-sidebar">
                 <ResizablePanelGroup
-                    ref="panelGroupRef"
                     direction="horizontal"
+                    auto-save-id="vrcx-main-layout-right-sidebar"
                     :class="['group/main-layout flex-1 h-full min-w-0', { 'aside-collapsed': isAsideCollapsedStatic }]"
                     @layout="handleLayout">
                     <template #default="{ layout }">
@@ -37,9 +37,8 @@
                                     'z-20 [&>div]:-translate-x-1/2'
                                 ]"></ResizableHandle>
                             <ResizablePanel
-                                ref="asidePanelRef"
                                 :default-size="asideDefaultSize"
-                                :max-size="asideMaxSize"
+                                :min-size="asideMinSize"
                                 :collapsed-size="0"
                                 collapsible
                                 :order="2"
@@ -114,7 +113,7 @@
     const router = useRouter();
 
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { navWidth, isNavCollapsed, asideWidth } = storeToRefs(appearanceSettingsStore);
+    const { navWidth, isNavCollapsed } = storeToRefs(appearanceSettingsStore);
 
     const sidebarOpen = computed(() => !isNavCollapsed.value);
 
@@ -163,18 +162,16 @@
     });
 
     const {
-        panelGroupRef,
         asideDefaultSize,
-        asideMaxSize,
+        asideMinSize,
         asideMaxPx,
         mainDefaultSize,
         handleLayout,
         isAsideCollapsed,
+        isAsideCollapsedStatic,
         isSideBarTabShow
     } = useMainLayoutResizable();
 
-    const isAsideCollapsedStatic = computed(() => !isSideBarTabShow.value || asideWidth.value === 0);
-
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {