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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user