feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.

Frontend-Learner/components/user/UserMenu.vue

@@ -1,49 +1,47 @@
 <script setup lang="ts">
 /**
  * @file UserMenu.vue
- * @description User profile dropdown menu component.
- * Features:
- * - Displays user initials and info
- * - Navigation links
- * - Dark mode toggle
- * - Logout functionality
- * - Responsive positioning using Teleport
+ * @description User profile dropdown menu component using Quasar.
  */
 
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useAuth } from '~/composables/useAuth'
 
 const { currentUser, logout } = useAuth()
 const { t } = useI18n()
-const isOpen = ref(false)
 const isDarkMode = ref(false)
-const menuRef = ref<HTMLDivElement | null>(null)
 
-// Sync Dark Mode state on mount
+// Sync Dark Mode state
 onMounted(() => {
-  // Should default to light, so we ensure state matches.
   if (document.documentElement.classList.contains('dark')) {
     isDarkMode.value = true
   }
 })
-// Position calculation for the dropdown
-const menuPosition = ref({ top: '0px', right: '0px' })
 
-// Computed property to display user initials (e.g. "JD" for John Doe)
+// 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() || ''
+  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 ''
+  if (!currentUser.value) return 'User'
   return `${currentUser.value.firstName} ${currentUser.value.lastName}`
 })
 
-// Navigation menu definition
-// Navigation menu definition
 const menuItems = computed(() => [
   { label: t('userMenu.home'), to: '/dashboard' },
   { label: t('userMenu.courseList'), to: '/browse/discovery' },
@@ -51,166 +49,74 @@ const menuItems = computed(() => [
   { label: t('userMenu.settings'), to: '/dashboard/profile' }
 ])
 
-const handleNavigate = (path: string) => {
-  navigateTo(path)
-  isOpen.value = false
-}
-
 const handleLogout = async () => {
   await logout()
 }
-
-/**
- * Toggles dark mode on the document element.
- */
-const toggleDarkMode = () => {
-  isDarkMode.value = !isDarkMode.value
-  if (isDarkMode.value) {
-    document.documentElement.classList.add('dark')
-    localStorage.setItem('theme', 'dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-    localStorage.setItem('theme', 'light')
-  }
-}
-
-/**
- * Calculates and updates the menu position relative to the button.
- */
-const updateMenuPosition = () => {
-  if (menuRef.value) {
-    const rect = menuRef.value.getBoundingClientRect()
-    menuPosition.value = {
-      top: `${rect.bottom + 8}px`,
-      right: `${window.innerWidth - rect.right}px`
-    }
-  }
-}
-
-const toggleMenu = () => {
-  isOpen.value = !isOpen.value
-  if (isOpen.value) {
-    updateMenuPosition()
-  }
-}
-
-// Event listeners for closing menu on click outside and resizing
-onMounted(() => {
-  const handleClickOutside = (e: MouseEvent) => {
-    if (isOpen.value && menuRef.value && !menuRef.value.contains(e.target as Node)) {
-      isOpen.value = false
-    }
-  }
-  document.addEventListener('click', handleClickOutside)
-  return () => {
-    document.removeEventListener('click', handleClickOutside)
-  }
-})
-
-onMounted(() => {
-  const handleResize = () => {
-    if (isOpen.value) {
-      updateMenuPosition()
-    }
-  }
-  window.addEventListener('resize', handleResize)
-  return () => {
-    window.removeEventListener('resize', handleResize)
-  }
-})
 </script>
 
 <template>
-  <div ref="menuRef" class="relative">
-    <!-- Avatar Button -->
-    <button
-      class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white font-bold text-sm hover:bg-blue-600 transition-colors cursor-pointer ring-2 ring-blue-500/30"
-      :title="userName"
-      @click="toggleMenu"
-    >
-      {{ userInitials }}
-    </button>
-
-    <!-- Dropdown Menu - Teleport to body to avoid overflow-hidden -->
-    <Teleport to="body">
-      <Transition
-        enter-active-class="transition ease-out duration-100"
-        enter-from-class="transform opacity-0 scale-95"
-        enter-to-class="transform opacity-100 scale-100"
-        leave-active-class="transition ease-in duration-75"
-        leave-from-class="transform opacity-100 scale-100"
-        leave-to-class="transform opacity-0 scale-95"
+  <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
-            v-if="isOpen"
-            class="fixed rounded-2xl shadow-lg dark:shadow-2xl z-50 w-64 border overflow-hidden transition-colors"
-            style="background-color: var(--bg-surface); border-color: rgba(255,255,255,0.1);"
-            :style="{
-              top: menuPosition.top,
-              right: menuPosition.right
-            }"
+        <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>
 
-          <!-- Menu Items -->
-            <nav class="py-2">
-            <button
-              v-for="item in menuItems"
-              :key="item.label"
-              class="w-full px-6 py-3 text-left transition-colors text-sm font-medium hover:bg-slate-100 dark:hover:bg-white/10 text-slate-800 dark:text-white"
-              @click="handleNavigate(item.to)"
-            >
-              {{ item.label }}
-            </button>
-          </nav>
+          <q-separator class="bg-white/10 my-1" />
 
-          <!-- Dark Mode Toggle -->
-          <div class="px-6 py-3 border-slate-200 dark:border-slate-700">
-            <button
-              class="w-full flex items-center justify-between py-2"
-              @click="toggleDarkMode"
-            >
-              <span class="text-sm font-medium text-slate-800 dark:text-white">{{ $t('userMenu.darkMode') }}</span>
-              <div
-                :class="[
-                  'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
-                  isDarkMode ? 'bg-blue-600' : 'bg-slate-300'
-                ]"
-              >
-                <span
-                  :class="[
-                    'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
-                    isDarkMode ? 'translate-x-6' : 'translate-x-1'
-                  ]"
-                />
-              </div>
-            </button>
-          </div>
-
-          <!-- Logout Button -->
-          <div class="px-6 py-3 border-t border-slate-200 dark:border-slate-700">
-            <button
-              class="w-full px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-lg font-medium transition-colors text-sm"
+          <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') }}
-            </button>
+            </q-btn>
           </div>
-        </div>
-      </Transition>
-    </Teleport>
-
-    <!-- Backdrop to close menu -->
-    <div
-      v-if="isOpen"
-      class="fixed inset-0 z-40"
-      @click="isOpen = false"
-    />
+        </q-list>
+      </q-menu>
+    </q-btn>
   </div>
 </template>
 
 <style scoped>
-button {
-  transition: all 0.2s ease;
-}
+/* Override Quasar generic styles if necessary */
 </style>