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

feat: show compact login/logout icon when sidebar collapsed

Browse Source
This commit is contained in:
Momentry Studio
2026-07-25 20:20:03 +08:00
parent 652ba77c77
commit f75eb44351
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@@ -150,8 +150,8 @@ onUnmounted(() => {
<span class="gs-nav-label">{{ t('nav.client') }}</span>
</router-link>
</nav>
<div class="gs-divider" :class="{ 'gs-hidden': sidebarCollapsed }"></div>
<div class="gs-footer" :class="{ 'gs-hidden': sidebarCollapsed }">
<div class="gs-divider gs-hidden"></div>
<div class="gs-footer gs-hidden">
<div class="gs-lang-switcher">
<select v-model="currentLanguage" @change="onChangeLanguage" class="gs-lang-select">
<option value="en">English</option>
@@ -169,6 +169,14 @@ onUnmounted(() => {
</template>
</div>
</div>
<div class="gs-footer-compact">
<template v-if="loggedInUser">
<button class="gs-logout-btn-compact" @click="handleLogout" title="Logout">⏻</button>
</template>
<template v-else>
<router-link to="/login" class="gs-login-link-compact" title="Login">⏻</router-link>
</template>
</div>
</aside>
<div class="ms-divider" :class="{ 'ms-divider-hidden': sidebarCollapsed }" @mousedown="startDrag"></div>
<main class="ms-main">
@@ -191,6 +199,11 @@ onUnmounted(() => {
.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-footer-compact { display: none; }
.ms-side.collapsed .gs-footer-compact { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding: 10px 0; }
.gs-logout-btn-compact, .gs-login-link-compact { background: none; border: 1px solid var(--border-color); cursor: pointer; font-size: 16px; color: var(--text-secondary); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; }
.gs-logout-btn-compact:hover { color: var(--danger-color); border-color: var(--danger-color); background: var(--danger-background); }
.gs-login-link-compact:hover { color: var(--text-primary); border-color: var(--text-primary); }
.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; }