feat: add initial frontend pages for course browsing, recommendations, and user dashboard.

Frontend-Learner/components/layout/AppHeader.vue

@@ -8,8 +8,6 @@
 import { ref, computed } from "vue";
 
 const props = defineProps<{
-  /** Controls visibility of the search bar */
-  showSearch?: boolean;
   /** Controls visibility of the sidebar toggle button */
   showSidebarToggle?: boolean;
   /** Type of navigation links to display */
@@ -19,6 +17,8 @@ const props = defineProps<{
 const emit = defineEmits<{
   /** Emitted when the hamburger menu is clicked */
   toggleSidebar: [];
+  /** Emitted when the mobile menu toggle is clicked */
+  toggleRightDrawer: [];
 }>();
 
 const { t } = useI18n();
@@ -34,150 +34,135 @@ const navTypeComputed = computed(() => {
     : "public";
 });
 
-const searchText = ref("");
+
 </script>
 
 <template>
-  <q-toolbar class="bg-white text-slate-900 h-16 shadow-sm border-none p-0">
-    <div
-      class="container mx-auto w-full px-6 md:px-12 flex items-center h-full"
-    >
-      <!-- Mobile Menu Toggle -->
+  <q-toolbar class="bg-white dark:!bg-[#0f172a] text-slate-900 dark:!text-white h-16 border-none p-0 overflow-visible">
+    <div class="w-full px-4 md:px-12 flex items-center h-full no-wrap relative">
+      
+      <!-- Mobile Sidebar Toggle (For non-learner routes) -->
       <q-btn
-        v-if="showSidebarToggle !== false && navTypeComputed !== 'learner'"
+        v-if="showSidebarToggle !== false && navTypeComputed !== 'learner' && $q.screen.lt.md"
         flat
         round
         dense
         icon="menu"
-        class="lg:hidden mr-2 text-gray-500"
+        class="mr-2 text-gray-500"
         @click="$emit('toggleSidebar')"
       />
 
-      <!-- Branding -->
+      <!-- Branding: Logo + Name -->
       <div
-        class="flex items-center gap-3 cursor-pointer group"
+        class="flex items-center gap-3 cursor-pointer group flex-shrink-0"
         @click="navigateTo('/dashboard')"
       >
-        <div
-          class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform"
-        >
+        <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform flex-shrink-0">
           E
         </div>
-        <div class="flex flex-col">
-          <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 class="flex flex-col text-left">
+          <span class="font-black text-[15px] md: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-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
         </div>
       </div>
 
-      <div
-        class="flex items-center min-w-[200px] md:min-w-[320px] max-w-sm ml-8 mr-8 h-10"
-      >
-        <q-input
-          v-model="searchText"
-          dense
-          borderless
-          :placeholder="$t('menu.searchCourses')"
-          class="search-input w-full bg-slate-100/60 px-4 rounded-full transition-all duration-300 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-100 h-full flex items-center"
-          @keyup.enter="navigateTo(`/browse/discovery?search=${searchText}`)"
-        >
-          <template #prepend>
-            <q-icon name="search" size="xs" class="text-blue-600" />
-          </template>
-        </q-input>
-      </div>
-
       <!-- Desktop Navigation -->
-      <nav class="flex items-center gap-8 text-[14px] font-bold text-slate-600">
-        <!-- Learner Navigation (Dashboard Mode) -->
-        <template v-if="navTypeComputed === 'learner'">
-          <NuxtLink
-            to="/dashboard"
-            class="hover:text-blue-600 transition-colors uppercase tracking-wider"
-            active-class="text-blue-600"
-          >
-            {{ $t("sidebar.overview") }}
-          </NuxtLink>
-          <NuxtLink
-            to="/browse/discovery"
-            class="hover:text-blue-600 transition-colors uppercase tracking-wider"
-            active-class="text-blue-600"
-          >
-            {{ $t("landing.allCourses") }}
-          </NuxtLink>
-
-          <NuxtLink
-            to="/dashboard/my-courses"
-            class="hover:text-blue-600 transition-colors uppercase tracking-wider"
-            active-class="text-blue-600"
-          >
-            {{ $t("sidebar.myCourses") || "คอร์สเรียนของฉัน" }}
-          </NuxtLink>
-        </template>
-
-        <!-- Public Navigation (Default) -->
-        <template v-else>
-          <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>
-          <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>
-        </template>
+      <nav class="header-desktop items-center gap-6 lg:gap-8 text-[14px] font-bold ml-12 flex-shrink-0 h-full">
+        <NuxtLink to="/dashboard" class="nav-link" exact-active-class="active">{{ $t("sidebar.overview") }}</NuxtLink>
+        <NuxtLink to="/browse/discovery" class="nav-link" active-class="active">{{ $t("landing.allCourses") }}</NuxtLink>
+        <NuxtLink to="/dashboard/my-courses" class="nav-link" exact-active-class="active">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</NuxtLink>
       </nav>
 
       <q-space />
 
-      <!-- Right Actions -->
-      <div class="flex items-center gap-2 sm:gap-4 text-gray-500">
-        <!-- Search Icon -->
+      <!-- Right Section: Tools -->
+      <div class="flex items-center gap-2 flex-shrink-0 no-wrap">
+        
+        <!-- Desktop Only Tools -->
+        <div class="header-desktop items-center gap-4 flex-shrink-0">
+          <LanguageSwitcher />
+          <UserMenu />
+        </div>
 
-        <!-- Language -->
-        <LanguageSwitcher />
+        <!-- Mobile/Tablet Tools Hidden (Moved to Drawer) -->
+        <!-- Just keep space between logo and hamburger -->
 
-        <!-- User Profile -->
-        <UserMenu />
+        <!-- Mobile/Tablet Hamburger -->
+        <q-btn
+          flat
+          round
+          dense
+          icon="menu"
+          class="header-mobile text-slate-700 dark:text-white bg-slate-100 dark:bg-slate-800 flex-shrink-0"
+          style="width: 40px; height: 40px; min-width: 40px;"
+          @click="$emit('toggleRightDrawer')"
+        />
       </div>
     </div>
   </q-toolbar>
 </template>
 
 <style scoped>
-.search-input :deep(.q-field__control) {
-  border-radius: 9999px; /* Full rounded */
+/* High Priority Visibility Logic */
+@media (max-width: 1023px) {
+  .header-desktop {
+    display: none !important;
+  }
+  .header-mobile {
+    display: flex !important;
+  }
 }
-.search-input :deep(.q-field__control:before) {
-  border-color: #e2e8f0; /* slate-200 */
+
+@media (min-width: 1024px) {
+  .header-mobile {
+    display: none !important;
+  }
+  .header-desktop {
+    display: flex !important;
+  }
+}
+
+.nav-link {
+  color: #64748b; /* slate-500 */
+  text-decoration: none;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.nav-link:hover {
+  color: #2563eb; /* blue-600 */
+}
+
+.nav-link.active {
+  color: #2563eb; /* blue-600 */
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background-color: #2563eb;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.nav-link.active::after {
+  width: 100%;
+}
+
+.router-link-active {
+  color: #2563eb !important;
 }
 </style>

Frontend-Learner/components/layout/LandingFooter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file LandingFooter.vue
- * @description Footer component for the landing page
+ * @description Footer component for the landing page - Adjusted to Image 2 (E-Learning Platform Branding)
  */
 </script>
 
@@ -23,17 +23,6 @@
           <p class="text-slate-500 text-sm leading-relaxed max-w-xs">
             แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
           </p>
-          <div class="flex gap-3">
-            <a href="#" class="w-9 h-9 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all">
-              <q-icon name="facebook" size="18px" />
-            </a>
-            <a href="#" class="w-9 h-9 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-sky-400 hover:text-white hover:border-sky-400 transition-all">
-              <q-icon name="flutter_dash" size="18px" />
-            </a>
-            <a href="#" class="w-9 h-9 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-pink-600 hover:text-white hover:border-pink-600 transition-all">
-              <q-icon name="camera_alt" size="18px" />
-            </a>
-          </div>
         </div>
 
         <!-- Links -->
@@ -58,40 +47,51 @@
           </ul>
         </div>
 
-        <!-- Contact -->
-        <div>
-          <h4 class="font-bold text-slate-900 mb-6 text-base">ติดต่อเรา</h4>
-          <ul class="space-y-4 text-sm text-slate-500">
-            <li class="flex items-start gap-3">
-              <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 mt-[-2px]">
-                 <q-icon name="location_on" size="18px" />
+        <!-- Contact (Bronco Hourse Data) -->
+        <div class="space-y-6">
+          <h4 class="font-bold text-slate-900 text-base">ติดต่อเรา</h4>
+          <div class="flex flex-col gap-5">
+            <!-- Location -->
+            <div class="flex flex-row items-start gap-4 flex-nowrap">
+              <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
+                 <q-icon name="location_on" size="20px" />
               </div>
-              <span class="leading-relaxed">123 อาคารสยามทาวเวอร์ ชั้น 15 เขตปทุมวัน กรุงเทพฯ 10330</span>
-            </li>
-            <li class="flex items-center gap-3">
-              <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0 text-blue-600">
+              <div class="flex flex-col gap-1 min-w-0">
+                <span class="font-bold text-slate-900 text-sm leading-tight pt-1">Bronco Hourse</span>
+                <p class="text-slate-500 text-[11px] leading-relaxed">
+                  74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200
+                </p>
+              </div>
+            </div>
+
+            <!-- Phone -->
+            <div class="flex flex-row items-center gap-4 flex-nowrap">
+              <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
                  <q-icon name="phone" size="18px" />
               </div>
-              <span>02-123-4567</span>
-            </li>
-            <li class="flex items-center gap-3">
-              <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0 text-blue-600">
+              <a href="tel:052-076-025" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
+                052-076-025
+              </a>
+            </div>
+
+            <!-- Email -->
+            <div class="flex flex-row items-center gap-4 flex-nowrap">
+              <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
                  <q-icon name="email" size="18px" />
               </div>
-              <span>support@elearning.com</span>
-            </li>
-          </ul>
+              <a href="mailto:info@chamomind.com" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
+                info@chamomind.com
+              </a>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4">
-        <p class="text-sm text-slate-500 text-center md:text-left">
-          © {{ new Date().getFullYear() }} E-Learning Platform. All rights reserved.
+      <!-- Bottom Bar (Centered Copyright) -->
+      <div class="pt-8 border-t border-slate-200 text-center">
+        <p class="text-sm text-slate-400 font-medium tracking-wide">
+          Copyright © CHAMOMIND CO., LTD. 2023
         </p>
-        <div class="flex gap-6 text-sm font-medium text-slate-500">
-          <a href="#" class="hover:text-blue-600 transition-colors">Privacy Policy</a>
-          <a href="#" class="hover:text-blue-600 transition-colors">Terms of Service</a>
-        </div>
       </div>
     </div>
   </footer>