feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.

Frontend-Learner/components/common/AppHeader.vue

@@ -2,7 +2,7 @@
 /**
  * @file AppHeader.vue
  * @description The main header for the authenticated application dashboard.
- * Includes sidebar toggle, branding, search functionality, and user menu.
+ * Uses Quasar QToolbar.
  */
 
 defineProps<{
@@ -14,35 +14,68 @@ const emit = defineEmits<{
   /** Emitted when the hamburger menu is clicked */
   toggleSidebar: []
 }>()
+
+const searchText = ref('')
 </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>
+  <q-toolbar class="bg-white text-slate-800 border-b border-gray-100 h-16 px-4">
+    <!-- Mobile Menu Toggle -->
+    <q-btn
+      flat
+      round
+      dense
+      icon="menu"
+      @click="emit('toggleSidebar')"
+      class="md:hidden mr-2"
+      aria-label="Menu"
+    />
+
+    <!-- Branding -->
+    <div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/dashboard')">
+      <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold">
+        E
+      </div>
+      <span class="font-bold text-xl text-blue-600 hidden xs:block">e-Learning</span>
     </div>
     
+    <q-space />
+    
+    <!-- Center Search (Optional) -->
+    <div v-if="showSearch !== false" class="hidden md:block w-1/3 max-w-md mx-4">
+      <q-input
+        dense
+        outlined
+        rounded
+        v-model="searchText"
+        :placeholder="$t('menu.searchCourses')"
+        class="bg-slate-50 search-input"
+        bg-color="slate-50" 
+      >
+        <template v-slot:prepend>
+          <q-icon name="search" class="text-slate-400" />
+        </template>
+      </q-input>
+    </div>
+    
+    <q-space />
+
     <!-- Right Actions -->
-    <div class="flex items-center gap-3">
-      <!-- Search Bar (Optional) -->
-      <div v-if="showSearch !== false" class="relative hidden-mobile" style="width: 300px;">
-        <input 
-          type="text" 
-          class="input-field" 
-          :placeholder="$t('menu.searchCourses')" 
-          style="padding-left: 36px;"
-        >
-        <span style="position: absolute; left: 12px; top: 10px; color: var(--text-secondary);">🔍</span>
-      </div>
-      
-      <!-- Language Switcher (Left of Avatar) -->
+    <div class="flex items-center gap-2">
+      <!-- Language Switcher -->
       <LanguageSwitcher />
       
       <!-- User Profile Dropdown -->
       <UserMenu />
     </div>
-  </header>
+  </q-toolbar>
 </template>
+
+<style scoped>
+.search-input :deep(.q-field__control) {
+  border-radius: 9999px; /* Full rounded */
+}
+.search-input :deep(.q-field__control:before) {
+  border-color: #e2e8f0; /* slate-200 */
+}
+</style>