elearning/Frontend-Learner/components/user/UserMenu.vue

<script setup lang="ts">
/**
 * @file UserMenu.vue
 * @description User profile dropdown menu component using Quasar.
 */

import { ref, computed, onMounted, watch } from 'vue'
import { useAuth } from '~/composables/useAuth'

const { currentUser, logout } = useAuth()
const { t } = useI18n()
const isDarkMode = ref(false)

// Sync Dark Mode state
onMounted(() => {
  if (document.documentElement.classList.contains('dark')) {
    isDarkMode.value = true
  }
})

// Watch for dark mode changes
watch(isDarkMode, (val) => {
  if (val) {
    document.documentElement.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  } else {
    document.documentElement.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  }
})

// 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 userName = computed(() => {
  if (!currentUser.value) return 'User'
  return `${currentUser.value.firstName} ${currentUser.value.lastName}`
})

const menuItems = computed(() => [
  { label: t('userMenu.home'), to: '/dashboard' },
  { label: t('userMenu.courseList'), to: '/browse/discovery' },
  { label: t('userMenu.myCourses'), to: '/dashboard/my-courses' },
  { label: t('userMenu.settings'), to: '/dashboard/profile' }
])

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">
        {{ userInitials }}
      </q-avatar>
      
      <q-menu 
        anchor="bottom end" 
        self="top end" 
        class="rounded-2xl shadow-xl overflow-hidden border border-slate-100 dark:border-slate-700" 
        :offset="[0, 10]"
        style="min-width: 240px; background-color: var(--bg-surface);"
      >
        <div class="bg-[#1e293b] text-white"> 
           <!-- Optional header if needed, but per design keeping it simple list -->
        </div>

        <q-list class="bg-[#1e293b] text-white py-2">
          <q-item 
            v-for="item in menuItems" 
            :key="item.label" 
            clickable 
            v-close-popup 
            @click="navigateTo(item.to)"
            class="hover:bg-white/10 transition-colors"
          >
            <q-item-section>
              <q-item-label class="font-bold text-sm">{{ item.label }}</q-item-label>
            </q-item-section>
          </q-item>

          <q-item class="hover:bg-white/10 transition-colors">
            <q-item-section>
              <q-item-label class="font-bold text-sm">{{ $t('userMenu.darkMode') }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-toggle
                v-model="isDarkMode"
                color="blue"
                keep-color
              />
            </q-item-section>
          </q-item>

          <q-separator class="bg-white/10 my-1" />

          <div class="p-4">
            <q-btn 
              unelevated
              class="w-full bg-red-500/10 text-red-400 hover:bg-red-500/20 font-bold rounded-lg"
              no-caps
              @click="handleLogout"
            >
              {{ $t('userMenu.logout') }}
            </q-btn>
          </div>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<style scoped>
/* Override Quasar generic styles if necessary */
</style>