elearning/Frontend-Learner/layouts/default.vue

47 lines
1.1 KiB
Vue

<script setup lang="ts">
/**
* @file default.vue
* @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
* Uses Quasar QLayout for responsive structure.
*/
// Initialize global theme management
useThemeMode()
</script>
<template>
<q-layout view="hHh lpr lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
<!-- Header -->
<q-header
bordered
class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
>
<AppHeader />
</q-header>
<!-- 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 dark:!bg-[#1e293b] text-primary border-t border-slate-200 dark:border-slate-700"
>
<MobileNav />
</q-footer>
</q-layout>
</template>
<style>
/* Ensure fonts are applied */
.font-inter {
font-family: 'Inter', sans-serif;
}
</style>