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
This commit is contained in:
curo1305
2026-05-22 20:09:16 +02:00
parent 9137f41537
commit 92e3d755d0
+43 -1
View File
@@ -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>