3fa236cff5
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 41s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file UserMenu.vue
|
|
* @description User profile dropdown menu component using Quasar.
|
|
*/
|
|
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useAuth } from '~/composables/useAuth'
|
|
import { useQuasar } from 'quasar'
|
|
|
|
const { currentUser, logout } = useAuth()
|
|
const { t } = useI18n()
|
|
const $q = useQuasar()
|
|
|
|
// Use centralized theme management
|
|
const { isDark, set } = useThemeMode()
|
|
|
|
const isHydrated = ref(false)
|
|
|
|
onMounted(() => {
|
|
isHydrated.value = true
|
|
})
|
|
|
|
// User Initials
|
|
const userInitials = computed(() => {
|
|
if (!currentUser.value) return ''
|
|
const f = currentUser.value.firstName?.charAt(0).toUpperCase() || 'U'
|
|
const l = currentUser.value.lastName?.charAt(0).toUpperCase() || ''
|
|
return f + l
|
|
})
|
|
|
|
const { userMenuItems } = useNavItems()
|
|
const menuItems = userMenuItems
|
|
|
|
|
|
const handleLogout = async () => {
|
|
await logout()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-pa-md">
|
|
<q-btn round flat class="text-slate-700 dark:text-white">
|
|
<q-avatar color="primary" text-color="white" size="40px" font-size="14px" class="font-bold shadow-md cursor-pointer">
|
|
<img
|
|
v-if="currentUser?.photoURL"
|
|
:src="currentUser.photoURL"
|
|
class="object-cover w-full h-full"
|
|
/>
|
|
<span v-else>{{ userInitials }}</span>
|
|
</q-avatar>
|
|
|
|
<q-menu
|
|
anchor="bottom end"
|
|
self="top end"
|
|
:offset="[0, 10]"
|
|
content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5"
|
|
style="width: 240px;"
|
|
>
|
|
<q-list class="py-2">
|
|
<q-item
|
|
v-for="item in menuItems"
|
|
:key="item.labelKey"
|
|
clickable
|
|
v-close-popup
|
|
@click="navigateTo(item.to)"
|
|
class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t(item.labelKey) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
|
|
<q-item-section>
|
|
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t('userMenu.darkMode') }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-toggle
|
|
v-if="isHydrated"
|
|
:model-value="isDark"
|
|
@update:model-value="set"
|
|
color="blue"
|
|
keep-color
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator class="bg-slate-100 dark:bg-white/5 my-1" />
|
|
|
|
<div class="px-4 py-2 mt-2">
|
|
<q-btn
|
|
unelevated
|
|
class="w-full bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/20 font-black rounded-xl"
|
|
no-caps
|
|
@click="handleLogout"
|
|
>
|
|
{{ $t('userMenu.logout') }}
|
|
</q-btn>
|
|
</div>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|