37 lines
No EOL
1 KiB
Vue
37 lines
No EOL
1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
userProfile: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
activeTab: {
|
|
type: String,
|
|
default: 'welcome'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['logout', 'navigate'])
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="settings-sidebar">
|
|
<div class="sidebar-header archivo-black">
|
|
MOD PORTAL
|
|
</div>
|
|
|
|
<div v-if="userProfile" class="user-badge">
|
|
<span class="user-name">{{ userProfile.username || userProfile.firstName }}</span>
|
|
<span class="user-email">{{ userProfile.email }}</span>
|
|
</div>
|
|
|
|
<nav class="sidebar-menu">
|
|
<button type="button" class="nav-item" :class="{ 'active-nav': activeTab === 'welcome' }"
|
|
@click="emit('navigate', '/')">
|
|
<span>Welcome</span>
|
|
</button>
|
|
<button type="button" class="nav-item logout-btn" @click="emit('logout')">
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
</template> |