feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Frontend-Learner/components/layout/AppHeader.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 /**
  * @file AppHeader.vue
- * @description The main header for the EduLearn application dashboard.
+ * @description แถบเมนูด้านบนหลัก (Header) สำหรับหน้าแดชบอร์ด (Dashboard) ของระบบ EduLearn
  */
 
 const props = defineProps<{
-  /** Controls visibility of the sidebar toggle button */
+  /** ควบคุมการแสดงผลของปุ่มเปิด/ปิดแถบเมนูด้านข้าง (Sidebar) */
   showSidebarToggle?: boolean;
 }>();
 
 const emit = defineEmits<{
-  /** Emitted when the hamburger menu is clicked */
+  /** ส่งสัญญาณ (Emit) เมื่อผู้ใช้คลิกที่ปุ่มแฮมเบอร์เกอร์เมนู */
   toggleSidebar: [];
 }>();
 
@@ -30,7 +30,7 @@ const toggleTheme = () => {
 <template>
   <q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
     
-    <!-- Left: Hamburger Toggle -->
+    <!-- ด้านซ้าย: ปุ่มย่อขยายแถบเมนูด้านข้าง (Hamburger Toggle) -->
     <q-btn
       flat
       round
@@ -43,10 +43,10 @@ const toggleTheme = () => {
 
     <q-space />
 
-    <!-- Right Section -->
+    <!-- ส่วนการตั้งค่าทางด้านขวา (Right Section) -->
     <div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
       
-      <!-- Theme Toggle -->
+      <!-- ปุ่มสลับธีม (Theme Toggle) -->
       <q-btn
         flat
         round
@@ -60,7 +60,7 @@ const toggleTheme = () => {
         <q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
       </q-btn>
 
-      <!-- Language Switcher (Pill Style) -->
+      <!-- ตัวสลับภาษาแบบแคปซูล (Language Switcher) -->
       <div 
         @click="toggleLanguage"
         class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
@@ -70,7 +70,7 @@ const toggleTheme = () => {
         <div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
       </div>
 
-      <!-- Divider -->
+      <!-- เส้นคั่น (Divider) -->
       <div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>
 
       <!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
@@ -102,12 +102,12 @@ const toggleTheme = () => {
 </template>
 
 <style scoped>
-/* Ensure toolbar height is consistent */
+/* บังคับให้ความสูงของ Header เท่ากันเสมอ (Ensure toolbar height is consistent) */
 :deep(.q-toolbar) {
   min-height: 80px;
 }
 
-/* Hide user name only on small mobile screens */
+/* ซ่อนชื่อผู้ใช้ไว้เฉพาะบนหน้าจอมือถือขนาดเล็กเท่านั้น (Hide user name only on small mobile screens) */
 @media (max-width: 600px) {
   .user-info-text {
     display: none !important;