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

Frontend-Learner/components/common/MobileNav.vue

@@ -1,29 +1,34 @@
 <script setup lang="ts">
-const route = useRoute()
-
 const navItems = [
-  { to: '/dashboard', icon: '🏠', label: 'หน้าหลัก' },
-  { to: '/browse/discovery', icon: '🔍', label: 'รายการคอร์ส' },
-  { to: '/dashboard/my-courses', icon: '📚', label: 'คอร์สของฉัน' }
+  { to: '/dashboard', icon: 'dashboard', label: 'หน้าหลัก' },
+  { to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
+  { to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
 ]
-
-const isActive = (path: string) => {
-  if (path === '/') return route.path === '/'
-  return route.path.startsWith(path)
-}
 </script>
 
 <template>
-  <nav class="mobile-nav">
-    <NuxtLink
+  <q-tabs
+    indicator-color="primary"
+    active-color="primary"
+    class="bg-white text-slate-500 shadow-up-1"
+    align="justify"
+    dense
+  >
+    <q-route-tab
       v-for="item in navItems"
       :key="item.to"
       :to="item.to"
-      class="mobile-nav-item"
-      :class="{ active: isActive(item.to) }"
-    >
-      <span>{{ item.icon }}</span>
-      <span>{{ item.label }}</span>
-    </NuxtLink>
-  </nav>
+      :icon="item.icon"
+      :label="item.label"
+      no-caps
+      class="py-2"
+    />
+  </q-tabs>
 </template>
+
+<style scoped>
+/* Optional shadow for better separation */
+.shadow-up-1 {
+  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
+}
+</style>