elearning/Frontend-Learner/layouts/default.vue

<script setup lang="ts">
/**
 * @file default.vue
 * @description Default application layout for authenticated users.
 * Includes the AppHeader and MobileNav.
 */
</script>

<template>
  <!-- App Shell: Main container with global background and text color -->
  <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 (Visible only on small screens) -->
    <MobileNav />
  </div>
</template>