From 652ba77c7739cb341c8342e7003060356107fbe0 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Sat, 25 Jul 2026 20:18:03 +0800
Subject: [PATCH] fix: use CSS instead of v-show for sidebar collapse text

- Replace v-show with CSS .gs-nav-label + .collapsed display: none
- Use CSS class .gs-hidden instead of v-show for footer/divider
- Fix content not re-displaying after collapse/expand
---
 src/App.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3fe4c13..4d1bbab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -117,7 +117,7 @@ onUnmounted(() => {
             <circle cx="11" cy="11" r="8"/>
             <path d="M21 21l-4.35-4.35"/>
           </svg>
-          <span v-show="!sidebarCollapsed">{{ t('nav.search') }}</span>
+          <span class="gs-nav-label">{{ t('nav.search') }}</span>
         </router-link>
         <router-link to="/library" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -126,7 +126,7 @@ onUnmounted(() => {
             <rect x="3" y="14" width="7" height="7" rx="1"/>
             <rect x="14" y="14" width="7" height="7" rx="1"/>
           </svg>
-          <span v-show="!sidebarCollapsed">{{ t('nav.library') }}</span>
+          <span class="gs-nav-label">{{ t('nav.library') }}</span>
         </router-link>
         <router-link to="/face" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -134,24 +134,24 @@ onUnmounted(() => {
             <circle cx="12" cy="10" r="4"/>
             <path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/>
           </svg>
-          <span v-show="!sidebarCollapsed">Face</span>
+          <span class="gs-nav-label">Face</span>
         </router-link>
         <router-link to="/admin" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="3"/>
             <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
           </svg>
-          <span v-show="!sidebarCollapsed">{{ t('nav.admin') }}</span>
+          <span class="gs-nav-label">{{ t('nav.admin') }}</span>
         </router-link>
         <router-link to="/client" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
           </svg>
-          <span v-show="!sidebarCollapsed">{{ t('nav.client') }}</span>
+          <span class="gs-nav-label">{{ t('nav.client') }}</span>
         </router-link>
       </nav>
-<div class="gs-divider" v-show="!sidebarCollapsed"></div>
-      <div class="gs-footer" v-show="!sidebarCollapsed">
+    <div class="gs-divider" :class="{ 'gs-hidden': sidebarCollapsed }"></div>
+      <div class="gs-footer" :class="{ 'gs-hidden': sidebarCollapsed }">
         <div class="gs-lang-switcher">
           <select v-model="currentLanguage" @change="onChangeLanguage" class="gs-lang-select">
             <option value="en">English</option>
@@ -189,7 +189,9 @@ onUnmounted(() => {
 .ms-side.collapsed { align-items: center; padding: 18px 8px; }
 .ms-side.collapsed .gs-nav { align-items: center; width: 100%; }
 .ms-side.collapsed .gs-nav-item { justify-content: center; padding: 0; width: 44px; }
+.ms-side.collapsed .gs-nav-label { display: none; }
 .ms-side.collapsed .gs-nav-icon { width: 22px; height: 22px; }
+.gs-hidden { display: none !important; }
 .gs-sidebar-toggle { display: flex; align-items: center; justify-content: flex-end; padding: 0 4px 12px 4px; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
 .gs-sidebar-toggle svg { transition: transform 0.2s; }
 .ms-side.collapsed .gs-sidebar-toggle { justify-content: center; width: 100%; }