From 92e3d755d0c62660ad6438444c0b3f8702bef82d Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Fri, 22 May 2026 20:09:16 +0200
Subject: [PATCH] feat(02-05): AppSidebar admin link and user identity footer

- Add conditional Admin nav link (v-if authStore.user?.role === 'admin') with shield SVG icon
- Add user identity footer: initials avatar (bg-indigo-100), email (truncate flex-1), sign-out icon button (aria-label="Sign out")
- Import useAuthStore alongside existing topicsStore; add useRouter for post-logout redirect
- All existing nav links, topicsStore reference, and scoped styles preserved unchanged
---
 frontend/src/components/layout/AppSidebar.vue | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue
index dd71606..167cf64 100644
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -54,8 +54,22 @@
       </div>
     </nav>
 
-    <!-- Settings link -->
+    <!-- Settings + Admin link -->
     <div class="px-3 py-4 border-t border-gray-100">
+      <!-- Admin link (admin users only) -->
+      <router-link
+        v-if="authStore.user?.role === 'admin'"
+        to="/admin"
+        class="nav-link"
+        :class="{ 'nav-link-active': $route.path === '/admin' }"
+      >
+        <svg class="w-4 h-4 mr-2 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        Admin
+      </router-link>
+
       <router-link
         to="/settings"
         class="nav-link"
@@ -68,13 +82,41 @@
         </svg>
         Settings
       </router-link>
+
+      <!-- User identity footer -->
+      <div v-if="authStore.user" class="flex items-center gap-3 px-4 py-3 border-t border-gray-100 mt-2 -mx-3">
+        <div class="bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-full w-8 h-8 flex items-center justify-center shrink-0">
+          {{ authStore.user.email ? authStore.user.email[0].toUpperCase() : '?' }}
+        </div>
+        <span class="text-xs text-gray-600 truncate flex-1">{{ authStore.user.email }}</span>
+        <button
+          @click="signOut"
+          aria-label="Sign out"
+          class="text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+        </button>
+      </div>
     </div>
   </aside>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
 import { useTopicsStore } from '../../stores/topics.js'
+import { useAuthStore } from '../../stores/auth.js'
+
 const topicsStore = useTopicsStore()
+const authStore = useAuthStore()
+const router = useRouter()
+
+async function signOut() {
+  await authStore.logout()
+  router.push('/login')
+}
 </script>
 
 <style scoped>