From e9cdb0ddbe6ce52801af5bc4e178b5cb39d81df1 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Wed, 28 Jan 2026 09:55:21 +0700
Subject: [PATCH] feat: Add `AppHeader` component and implement the default
 application layout.

---
 .../components/common/AppHeader.vue           | 15 +-------
 Frontend-Learner/layouts/default.vue          | 16 +-------
 Frontend-Learner/คู่มืออธิบาย/web-dev-details.md  | 38 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/Frontend-Learner/components/common/AppHeader.vue b/Frontend-Learner/components/common/AppHeader.vue
index dc65c0ee..1db794ff 100644
--- a/Frontend-Learner/components/common/AppHeader.vue
+++ b/Frontend-Learner/components/common/AppHeader.vue
@@ -10,10 +10,7 @@ defineProps<{
   showSearch?: boolean
 }>()
 
-const emit = defineEmits<{
-  /** Emitted when the hamburger menu is clicked */
-  toggleSidebar: []
-}>()
+
 
 const searchText = ref('')
 </script>
@@ -21,15 +18,7 @@ const searchText = ref('')
 <template>
   <q-toolbar class="bg-transparent text-slate-800 dark:text-white h-16 px-4">
     <!-- Mobile Menu Toggle -->
-    <q-btn
-      flat
-      round
-      dense
-      icon="menu"
-      @click="emit('toggleSidebar')"
-      class="md:hidden mr-2 text-slate-700 dark:text-white"
-      aria-label="Menu"
-    />
+
 
     <!-- Branding -->
     <div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/dashboard')">
diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue
index b506b768..4ab34cff 100644
--- a/Frontend-Learner/layouts/default.vue
+++ b/Frontend-Learner/layouts/default.vue
@@ -5,11 +5,7 @@
  * Uses Quasar QLayout for responsive structure.
  */
 
-const leftDrawerOpen = ref(false)
 
-const toggleLeftDrawer = () => {
-  leftDrawerOpen.value = !leftDrawerOpen.value
-}
 
 // Initialize global theme management
 useThemeMode()
@@ -22,19 +18,9 @@ useThemeMode()
       bordered
       class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
     >
-      <AppHeader @toggle-sidebar="toggleLeftDrawer" />
+      <AppHeader />
     </q-header>
 
-    <!-- Sidebar (Drawer) -->
-    <q-drawer
-      v-model="leftDrawerOpen"
-      bordered
-      class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-r border-slate-200 dark:border-slate-700"
-      :width="260"
-    >
-      <AppSidebar />
-    </q-drawer>
-
     <!-- Main Content -->
     <q-page-container>
       <q-page class="relative">
diff --git a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
index d248b526..bb3bcf05 100644
--- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
+++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
@@ -98,7 +98,43 @@
 
 ---
 
-## 📊 5. Project Status (สถานะการพัฒนา)
+##  6. Dependency Map & Relationships (แผนผังความสัมพันธ์ไฟล์)
+
+ส่วนนี้ใช้อ้างอิงเวลาแก้ไขโค้ด เพื่อดูว่าไฟล์ไหนเชื่อมโยงหรือถูกเรียกใช้โดยไฟล์ใดบ้าง (Impact Analysis)
+
+### 6.1 Page Dependencies (หน้าเว็บหลักใช้อะไรบ้าง)
+
+| Page (หน้าเว็บ)                    | Components used (ส่วนประกอบที่ใช้)          | Composables used (Logic & API ที่ใช้)                 |
+| :--------------------------------- | :------------------------------------------ | :---------------------------------------------------- |
+| **`pages/index.vue`** (Landing)    | `LandingHeader`, `CourseCard`               | `useAuth`, `useCourse` (fetchCourses)                 |
+| **`pages/browse/discovery.vue`**   | `CourseCard`, `FormInput`, `LoadingSpinner` | `useCategory` (Filter), `useCourse` (Search/List)     |
+| **`pages/course/[id].vue`**        | `LoadingSpinner`, `UserAvatar` (Instructor) | `useCourse` (Detail, Enroll), `useAuth` (User Status) |
+| **`pages/classroom/learning.vue`** | `AppSidebar` (Curriculum), `GlobalLoader`   | `useCourse` (Video, Progress), `useThemeMode`         |
+| **`pages/dashboard/index.vue`**    | `CourseCard` (Recommended), `UserAvatar`    | `useAuth` (Profile), `useCourse` (My Courses)         |
+| **`pages/auth/*.vue`** (Login/Reg) | `FormInput`, `LanguageSwitcher`             | `useAuth` (Login/Register), `useFormValidation`       |
+
+### 6.2 Key Components Dependencies (Component นี้ถูกใช้ที่ไหน)
+
+- **`CourseCard.vue`** ถูกใช้ใน:
+  - `pages/index.vue` (Recommended)
+  - `pages/browse/index.vue` (Catalog List)
+  - `pages/browse/discovery.vue` (Search Result)
+  - `pages/dashboard/index.vue` (Dashboard Recommend)
+  - `pages/dashboard/my-courses.vue` (My Course List)
+
+- **`FormInput.vue`** ถูกใช้ใน:
+  - `pages/auth/*` (Login, Register, Forgot Password)
+  - `pages/dashboard/profile.vue` (Edit Profile)
+
+### 6.3 Composable Usage (Logic นี้ใครเรียกใช้บ้าง)
+
+- **`useAuth.ts`** -> ถูกเรียกใช้เกือบทุกหน้าที่มีการเช็ค User, Logout, หรือแสดงชื่อ
+- **`useCourse.ts`** -> ถูกเรียกใช้ในหน้า Browse, Course Detail, Classroom, Dashboard
+- **`useThemeMode.ts`** -> ถูกเรียกใช้ใน `layouts/default.vue` เพื่อคุม Theme ทั้งเว็บ
+
+---
+
+## �📊 7. Project Status (สถานะการพัฒนา)
 
 ### ✅ Completed Updates (สิ่งที่ทำเสร็จแล้ว)