From f75eb44351a92fa45bd0bf1f7e4ff9695c079b9b Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Sat, 25 Jul 2026 20:20:03 +0800
Subject: [PATCH] feat: show compact login/logout icon when sidebar collapsed

---
 src/App.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4d1bbab..2756a38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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; }