feat: Implement core application UI with new headers, navigation, and initial pages.

Frontend-Learner/components/layout/AppHeader.vue

@@ -19,16 +19,15 @@ const searchText = ref('')
 </script>
 
 <template>
-  <q-toolbar class="bg-transparent text-slate-800 dark:text-white h-16 px-4">
-    <!-- Menu Toggle (Always Visible) -->
+  <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"
-      @click="emit('toggleSidebar')"
-      class="mr-2 text-slate-900 dark:text-white bg-slate-100 dark:bg-slate-700/50 hover:bg-slate-200 dark:hover:bg-slate-600"
-      aria-label="Menu"
+      class="lg:hidden mr-2 text-gray-500"
+      @click="$emit('toggleSidebar')"
     />
 
     <!-- Branding -->
@@ -37,49 +36,53 @@ const searchText = ref('')
         E
       </div>
       <div class="flex flex-col">
-        <span class="font-black text-lg leading-none tracking-tight text-slate-900 dark:text-white 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 dark:text-slate-400">Platform</span>
+        <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>
 
     <!-- Desktop Navigation -->
-    <nav class="hidden md:flex items-center gap-6 ml-8 text-sm font-bold">
-      <NuxtLink to="/browse" class="text-slate-600 hover:text-blue-600 transition-colors">
-        {{ $t('sidebar.onlineCourses') }}
+    <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>
+      </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>
-      <NuxtLink to="/browse/discovery" class="text-slate-600 hover:text-blue-600 transition-colors">
-        {{ $t('sidebar.recommendedCourses') }}
-      </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 />
-    
-    <!-- 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 dark:bg-slate-700/50 search-input"
-        bg-color="transparent" 
-      >
-        <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-2">
-      <!-- Language Switcher -->
+    <div class="flex items-center gap-2 sm:gap-4 text-gray-500">
+      <!-- Search Icon -->
+      <q-btn flat round dense icon="search" class="hover:text-purple-600 transition-colors" />
+      
+      <!-- Cart Icon -->
+      <q-btn flat round dense icon="shopping_cart" class="hover:text-purple-600 transition-colors" />
+
+      <!-- Notifications -->
+      <q-btn flat round dense icon="notifications_none" class="hover:text-purple-600 transition-colors">
+         <q-badge color="red" floating rounded dense v-if="false">2</q-badge>
+      </q-btn>
+
+       <!-- Language -->
       <LanguageSwitcher />
       
-      <!-- User Profile Dropdown -->
+      <!-- User Profile -->
       <UserMenu />
     </div>
   </q-toolbar>

Frontend-Learner/components/layout/LandingHeader.vue

@@ -9,11 +9,16 @@
 const isScrolled = ref(false)
 const { isAuthenticated } = useAuth()
 
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 20
+}
+
 onMounted(() => {
-  // Add scroll listener to toggle 'isScrolled' class
-  window.addEventListener('scroll', () => {
-    isScrolled.value = window.scrollY > 20
-  })
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
 })
 </script>