elearning/Frontend-Learner/layouts/default.vue

51 lines
1.1 KiB
Vue

<script setup lang="ts">
/**
* @file default.vue
* @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
* Uses Quasar QLayout for responsive structure.
*/
const leftDrawerOpen = ref(false)
const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
<template>
<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>
<!-- Sidebar (Drawer) -->
<q-drawer
v-model="leftDrawerOpen"
bordered
class="bg-white"
:width="260"
>
<AppSidebar />
</q-drawer>
<!-- 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>