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

Frontend-Learner/layouts/default.vue

@@ -2,22 +2,50 @@
 /**
  * @file default.vue
  * @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
- * ประกอบด้วย Header (Navbar) และ Mobile Navigation
+ * Uses Quasar QLayout for responsive structure.
  */
+
+const leftDrawerOpen = ref(false)
+
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
 </script>
 
 <template>
-  <!-- App Shell: คอนเทนเนอร์หลักของแอปพลิเคชัน -->
-  <div class="app-shell min-h-screen transition-colors duration-200">
-    <!-- Header: แถบเมนูด้านบน -->
-    <AppHeader />
+  <q-layout view="hHh lpr lFf" class="bg-slate-50 font-inter">
+    <!-- Header -->
+    <q-header bordered class="bg-white text-slate-800">
+      <AppHeader @toggle-sidebar="toggleLeftDrawer" />
+    </q-header>
 
-    <!-- Main Content Area: ส่วนแสดงเนื้อหาหลัก -->
-    <main class="app-main">
-      <slot />
-    </main>
+    <!-- Sidebar (Drawer) -->
+    <q-drawer
+      v-model="leftDrawerOpen"
+      bordered
+      class="bg-white"
+      :width="260"
+    >
+      <AppSidebar />
+    </q-drawer>
 
-    <!-- Mobile Bottom Navigation: แถบเมนูด้านล่าง (แสดงเฉพาะมือถือ) -->
-    <MobileNav />
-  </div>
+    <!-- Main Content -->
+    <q-page-container>
+      <q-page class="relative">
+        <slot />
+      </q-page>
+    </q-page-container>
+
+    <!-- Mobile Bottom Nav -->
+    <q-footer v-if="$q.screen.lt.md" bordered class="bg-white text-primary">
+       <MobileNav />
+    </q-footer>
+  </q-layout>
 </template>
+
+<style>
+/* Ensure fonts are applied */
+.font-inter {
+  font-family: 'Inter', sans-serif;
+}
+</style>