admin/momentry_studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: use CSS instead of v-show for sidebar collapse text

Browse Source 
- 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
This commit is contained in:
Momentry Studio
2026-07-25 20:18:03 +08:00
parent ca94259fba
commit 652ba77c77
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@@ -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%; }