feat: Implement user profile management, course browsing, and dashboard structure with new components and layouts.

Frontend-Learner/components/layout/AppHeader.vue

@@ -5,9 +5,15 @@
  * Uses Quasar QToolbar.
  */
 
-defineProps<{
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
   /** Controls visibility of the search bar */
   showSearch?: boolean
+  /** Controls visibility of the sidebar toggle button */
+  showSidebarToggle?: boolean
+  /** Type of navigation links to display */
+  navType?: 'public' | 'learner'
 }>()
 
 const emit = defineEmits<{
@@ -15,67 +21,114 @@ const emit = defineEmits<{
   toggleSidebar: []
 }>()
 
+const { t } = useI18n()
+const route = useRoute()
+
+// Automatically determine navType based on route if not explicitly passed
+const navTypeComputed = computed(() => {
+  if (props.navType) return props.navType
+  // Show learner nav for dashboard, browse, classroom, and course details
+  const learnerRoutes = ['/dashboard', '/browse', '/classroom', '/course']
+  return learnerRoutes.some(r => route.path.startsWith(r)) ? 'learner' : 'public'
+})
+
 const searchText = ref('')
 </script>
 
 <template>
-  <q-toolbar class="bg-white text-slate-900 h-16 px-4 md:px-8">
-    <!-- Mobile Menu Toggle -->
-    <q-btn
-      flat
-      round
-      dense
-      icon="menu"
-      class="lg:hidden mr-2 text-gray-500"
-      @click="$emit('toggleSidebar')"
-    />
+  <q-toolbar class="bg-white text-slate-900 h-16 shadow-sm border-none p-0">
+    <div class="container mx-auto w-full px-6 md:px-12 flex items-center h-full">
+      <!-- Mobile Menu Toggle -->
+      <q-btn
+        v-if="showSidebarToggle !== false && navTypeComputed !== 'learner'"
+        flat
+        round
+        dense
+        icon="menu"
+        class="lg:hidden mr-2 text-gray-500"
+        @click="$emit('toggleSidebar')"
+      />
 
-    <!-- Branding -->
-    <div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard')">
-      <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
-        E
+      <!-- Branding -->
+      <div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard')">
+        <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
+          E
+        </div>
+        <div class="flex flex-col">
+          <span class="font-black text-lg leading-none tracking-tight text-slate-900 group-hover:text-blue-600 transition-colors">E-Learning</span>
+          <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
+        </div>
       </div>
-      <div class="flex flex-col">
-        <span class="font-black text-lg leading-none tracking-tight text-slate-900 group-hover:text-blue-600 transition-colors">E-Learning</span>
-        <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
+
+      <div class="flex items-center min-w-[200px] md:min-w-[320px] max-w-sm ml-8 mr-8 h-10">
+        <q-input
+          v-model="searchText"
+          dense
+          borderless
+          placeholder="ค้นหาคอร์สเรียน..."
+          class="search-input w-full bg-slate-100/60 px-4 rounded-full transition-all duration-300 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-100 h-full flex items-center"
+          @keyup.enter="navigateTo(`/browse/discovery?search=${searchText}`)"
+        >
+          <template #prepend>
+            <q-icon name="search" size="xs" class="text-blue-600" />
+          </template>
+        </q-input>
       </div>
-    </div>
 
-    <!-- Desktop Navigation -->
-    <nav class="hidden lg:flex items-center gap-6 text-sm font-medium text-gray-600">
-      <div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
-        คอร์สออนไลน์ <q-icon name="keyboard_arrow_down" />
-        <q-menu>
-             <q-list dense style="min-width: 150px">
-                <q-item clickable v-close-popup to="/browse">
-                   <q-item-section>ทั้งหมด</q-item-section>
-                </q-item>
-             </q-list>
-        </q-menu>
+      <!-- Desktop Navigation -->
+      <nav class="flex items-center gap-8 text-[14px] font-bold text-slate-600">
+        
+        <!-- Learner Navigation (Dashboard Mode) -->
+        <template v-if="navTypeComputed === 'learner'">
+          <NuxtLink to="/dashboard" class="hover:text-blue-600 transition-colors uppercase tracking-wider" active-class="text-blue-600">
+            หน้าหลัก
+          </NuxtLink>
+          <NuxtLink to="/browse/discovery" class="hover:text-blue-600 transition-colors uppercase tracking-wider" active-class="text-blue-600">
+            คอร์สเรียนทั้งหมด
+          </NuxtLink>
+
+          <NuxtLink to="/dashboard/my-courses" class="hover:text-blue-600 transition-colors uppercase tracking-wider" active-class="text-blue-600">
+            {{ $t('sidebar.myCourses') || 'คอร์สเรียนของฉัน' }}
+          </NuxtLink>
+        </template>
+
+        <!-- Public Navigation (Default) -->
+        <template v-else>
+          <div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
+            คอร์สเรียนทั้งหมด <q-icon name="keyboard_arrow_down" />
+            <q-menu>
+                <q-list dense style="min-width: 150px">
+                    <q-item clickable v-close-popup to="/browse">
+                      <q-item-section>ทั้งหมด</q-item-section>
+                    </q-item>
+                </q-list>
+            </q-menu>
+          </div>
+          <div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
+            หลักสูตร Onsite <q-icon name="keyboard_arrow_down" />
+          </div>
+          <NuxtLink to="/browse/recommended" class="hover:text-purple-600 transition-colors">
+            คอร์สแนะนำ
+          </NuxtLink>
+          <div class="cursor-pointer hover:text-purple-600 transition-colors">บทความ</div>
+          <div class="cursor-pointer hover:text-purple-600 transition-colors">สมาชิกรายปี</div>
+          <div class="cursor-pointer hover:text-purple-600 transition-colors">สำหรับองค์กร</div>
+        </template>
+      </nav>
+
+      <q-space />
+
+      <!-- Right Actions -->
+      <div class="flex items-center gap-2 sm:gap-4 text-gray-500">
+        <!-- Search Icon -->
+
+
+         <!-- Language -->
+        <LanguageSwitcher />
+        
+        <!-- User Profile -->
+        <UserMenu />
       </div>
-      <div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
-        หลักสูตร Onsite <q-icon name="keyboard_arrow_down" />
-      </div>
-      <NuxtLink to="/browse/recommended" class="hover:text-purple-600 transition-colors">
-        คอร์สแนะนำ
-      </NuxtLink>
-      <div class="cursor-pointer hover:text-purple-600 transition-colors">บทความ</div>
-      <div class="cursor-pointer hover:text-purple-600 transition-colors">สมาชิกรายปี</div>
-      <div class="cursor-pointer hover:text-purple-600 transition-colors">สำหรับองค์กร</div>
-    </nav>
-    
-    <q-space />
-
-    <!-- Right Actions -->
-    <div class="flex items-center gap-2 sm:gap-4 text-gray-500">
-      <!-- Search Icon -->
-
-
-       <!-- Language -->
-      <LanguageSwitcher />
-      
-      <!-- User Profile -->
-      <UserMenu />
     </div>
   </q-toolbar>
 </template>