elearning/Frontend-Learner/layouts/default.vue

<script setup lang="ts">
/**
 * @file default.vue
 * @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
 * ประกอบด้วย Header (Navbar) และ Mobile Navigation
 */
</script>

<template>
  <!-- App Shell: คอนเทนเนอร์หลักของแอปพลิเคชัน -->
  <div class="app-shell min-h-screen transition-colors duration-200">
    <!-- Header: แถบเมนูด้านบน -->
    <AppHeader />

    <!-- Main Content Area: ส่วนแสดงเนื้อหาหลัก -->
    <main class="app-main">
      <slot />
    </main>

    <!-- Mobile Bottom Navigation: แถบเมนูด้านล่าง (แสดงเฉพาะมือถือ) -->
    <MobileNav />
  </div>
</template>