0f92f0d00c
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file default.vue
|
|
* @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
|
|
* Uses Quasar QLayout for responsive structure.
|
|
*/
|
|
|
|
// Initialize global theme management
|
|
useThemeMode()
|
|
|
|
const leftDrawerOpen = ref(false)
|
|
const toggleLeftDrawer = () => {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
}
|
|
|
|
const route = useRoute()
|
|
// Automatically hide sidebar for learner routes
|
|
const shouldHideSidebar = computed(() => {
|
|
const silentRoutes = ['/dashboard', '/browse', '/classroom', '/course']
|
|
return silentRoutes.some(r => route.path.startsWith(r))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
|
|
<!-- Header -->
|
|
<q-header
|
|
class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white"
|
|
>
|
|
<AppHeader @toggleSidebar="toggleLeftDrawer" :showSidebarToggle="!shouldHideSidebar" />
|
|
</q-header>
|
|
|
|
<!-- Sidebar (Drawer) -->
|
|
<q-drawer
|
|
v-if="!shouldHideSidebar"
|
|
v-model="leftDrawerOpen"
|
|
show-if-above
|
|
:width="280"
|
|
class="bg-white dark:!bg-[#0f172a]"
|
|
>
|
|
<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"
|
|
class="!bg-white dark:!bg-[#1e293b] text-primary"
|
|
>
|
|
<MobileNav />
|
|
</q-footer>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style>
|
|
/* Ensure fonts are applied */
|
|
.font-inter {
|
|
font-family: var(--font-main);
|
|
}
|
|
</style>
|