57 lines
No EOL
2.1 KiB
Vue
57 lines
No EOL
2.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" style="display: flex; align-items: center; gap: 0.75rem;">
|
|
<img :src="userProfile.pid ? `https://mii.spbr.net/${userProfile.pid}/main.png` : '/img_unknown_MiiIcon.png'"
|
|
:alt="userProfile.sfid || 'Mii Avatar'"
|
|
style="width: 40px; height: 40px; border-radius: 50%; background: #161b22; object-fit: contain; flex-shrink: 0;"
|
|
@error="(e) => e.target.src = '/img_unknown_MiiIcon.png'" />
|
|
|
|
<div style="display: flex; flex-direction: column; overflow: hidden; text-align: left;">
|
|
<span class="user-sfid"
|
|
style="font-weight: 600; color: #f0f6fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
|
{{ userProfile.sfid || 'No SFID Linked' }}
|
|
</span>
|
|
</div>
|
|
</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" :class="{ 'active-nav': activeTab === 'search' }"
|
|
@click="emit('navigate', '/search')">
|
|
<span>Search Users</span>
|
|
</button>
|
|
|
|
<button type="button" class="nav-item"
|
|
:class="{ 'active-nav': activeTab === 'audit' || activeTab === 'audit/log' }"
|
|
@click="emit('navigate', '/audit/log')">
|
|
<span>Audit Logs</span>
|
|
</button>
|
|
|
|
<button type="button" class="nav-item logout-btn" @click="emit('logout')">
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
</template> |