Allow sidebar use panel collapse/expand instead of conditional rendering

src/stores/settings/appearance.js

@@ -102,7 +102,6 @@ export const useAppearanceSettingsStore = defineStore(
             return ![
                 'friends-locations',
                 'friend-list',
-                'charts',
                 'charts-instance',
                 'charts-mutual'
             ].includes(currentRouteName);

src/views/Layout/MainLayout.vue

@@ -29,7 +29,6 @@
                             </RouterView>
                         </ResizablePanel>
 
-                        <template v-if="isSideBarTabShow">
                         <ResizableHandle
                             with-handle
                             :class="[
@@ -37,6 +36,7 @@
                                 'z-20 [&>div]:-translate-x-1/2'
                             ]"></ResizableHandle>
                         <ResizablePanel
+                            ref="asidePanelRef"
                             :default-size="asideDefaultSize"
                             :min-size="asideMinSize"
                             :collapsed-size="0"
@@ -46,7 +46,6 @@
                             <Sidebar></Sidebar>
                         </ResizablePanel>
                     </template>
-                    </template>
                 </ResizablePanelGroup>
             </SidebarInset>
         </SidebarProvider>
@@ -83,7 +82,7 @@
 </template>
 
 <script setup>
-    import { computed, onUnmounted, watch } from 'vue';
+    import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useRouter } from 'vue-router';
 
@@ -172,6 +171,17 @@
         isSideBarTabShow
     } = useMainLayoutResizable();
 
+    const asidePanelRef = ref(null);
+
+    watch(isSideBarTabShow, async (show) => {
+        await nextTick();
+        if (show) {
+            asidePanelRef.value?.expand();
+        } else {
+            asidePanelRef.value?.collapse();
+        }
+    });
+
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {