Website Structure

Frontend-Learner/components/common/AppHeader.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * @file AppHeader.vue
+ * @description The main header for the authenticated application dashboard.
+ * Includes sidebar toggle, branding, search functionality, and user menu.
+ */
+
+defineProps<{
+  /** Controls visibility of the search bar */
+  showSearch?: boolean
+}>()
+
+const emit = defineEmits<{
+  /** Emitted when the hamburger menu is clicked */
+  toggleSidebar: []
+}>()
+</script>
+
+<template>
+  <header class="app-header transition-colors" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
+    <!-- Branding & Toggle -->
+    <div class="flex items-center gap-2">
+      <NuxtLink to="/dashboard" style="font-weight: 800; color: var(--primary); font-size: 20px;">
+        e-Learning
+      </NuxtLink>
+    </div>
+    
+    <!-- Right Actions -->
+    <div class="flex items-center gap-4">
+      <!-- Search Bar (Optional) -->
+      <div v-if="showSearch !== false" class="relative hidden-mobile" style="width: 300px;">
+        <input 
+          type="text" 
+          class="input-field" 
+          placeholder="ค้นหาคอร์ส..." 
+          style="padding-left: 36px;"
+        >
+        <span style="position: absolute; left: 12px; top: 10px; color: var(--text-secondary);">🔍</span>
+      </div>
+      
+      <!-- User Profile Dropdown -->
+      <UserMenu />
+    </div>
+  </header>
+</template>