From 503a7978f52bcf5cb7ef5c5de4c78f018ba4d65f Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Thu, 26 Feb 2026 19:30:33 +0900
Subject: [PATCH] Allow sidebar use panel collapse/expand instead of
 conditional rendering

---
 src/stores/settings/appearance.js |  1 -
 src/views/Layout/MainLayout.vue   | 46 +++++++++++++++++++------------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/stores/settings/appearance.js b/src/stores/settings/appearance.js
index 70a1ab3b..5ae11ad9 100644
--- a/src/stores/settings/appearance.js
+++ b/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);
diff --git a/src/views/Layout/MainLayout.vue b/src/views/Layout/MainLayout.vue
index 817488a2..404c37c1 100644
--- a/src/views/Layout/MainLayout.vue
+++ b/src/views/Layout/MainLayout.vue
@@ -29,23 +29,22 @@
                             </RouterView>
                         </ResizablePanel>
 
-                        <template v-if="isSideBarTabShow">
-                            <ResizableHandle
-                                with-handle
-                                :class="[
-                                    isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
-                                    'z-20 [&>div]:-translate-x-1/2'
-                                ]"></ResizableHandle>
-                            <ResizablePanel
-                                :default-size="asideDefaultSize"
-                                :min-size="asideMinSize"
-                                :collapsed-size="0"
-                                collapsible
-                                :order="2"
-                                :style="{ maxWidth: `${asideMaxPx}px` }">
-                                <Sidebar></Sidebar>
-                            </ResizablePanel>
-                        </template>
+                        <ResizableHandle
+                            with-handle
+                            :class="[
+                                isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
+                                'z-20 [&>div]:-translate-x-1/2'
+                            ]"></ResizableHandle>
+                        <ResizablePanel
+                            ref="asidePanelRef"
+                            :default-size="asideDefaultSize"
+                            :min-size="asideMinSize"
+                            :collapsed-size="0"
+                            collapsible
+                            :order="2"
+                            :style="{ maxWidth: `${asideMaxPx}px` }">
+                            <Sidebar></Sidebar>
+                        </ResizablePanel>
                     </template>
                 </ResizablePanelGroup>
             </SidebarInset>
@@ -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) => {