feat: Implement user dashboard with recommended courses, a 'My Courses' page for enrolled courses, and a reusable CourseCard component.

Frontend-Learner/components/course/CourseCard.vue

@@ -8,12 +8,12 @@
 interface CourseCardProps {
   id?: number
   title: string | { th: string; en: string }
-  category?: string
+  category?: string | { th: string; en: string }
   level?: string
   price?: string
   description?: string | { th: string; en: string }
   rating?: string
-  lessons?: string
+  lessons?: string | number
   duration?: string
   progress?: number
   completed?: boolean
@@ -51,6 +51,7 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
 
 const displayTitle = computed(() => getLocalizedText(props.title))
 const displayDescription = computed(() => getLocalizedText(props.description))
+const displayCategory = computed(() => getLocalizedText(props.category))
 </script>
 
 <template>

Frontend-Learner/components/user/UserMenu.vue

@@ -58,7 +58,7 @@ const handleLogout = async () => {
         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="min-width: 240px;"
+        style="width: 240px;"
       >
         <q-list class="py-2">
           <q-item