66 lines
2 KiB
Vue
66 lines
2 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file default.vue
|
|
* @description เลย์เอาต์หลัก (Master Layout) สำหรับผู้ใช้งานที่เข้าสู่ระบบแล้ว
|
|
* ประกอบด้วยแถบเมนูด้านบน (Header), แถบเมนูด้านข้าง (Sidebar) และพื้นที่เนื้อหา
|
|
*/
|
|
|
|
useThemeMode()
|
|
|
|
const leftDrawerOpen = ref(true)
|
|
|
|
const toggleLeftDrawer = () => {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
}
|
|
|
|
const route = useRoute()
|
|
// ระบุว่า path ไหนบ้างที่ให้แสดงแถบเมนูด้านข้าง (Sidebar)
|
|
const isDashboardRoute = computed(() => {
|
|
const routes = ['/dashboard', '/browse', '/classroom', '/course']
|
|
return routes.some(r => route.path.startsWith(r))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="lHh Lpr lFf" class="bg-[#F8FAFC] dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
|
|
|
|
<!-- ส่วนหัว (Header) -->
|
|
<q-header
|
|
class="bg-transparent text-slate-900 dark:!text-white border-none shadow-none"
|
|
>
|
|
<AppHeader @toggleSidebar="toggleLeftDrawer" />
|
|
</q-header>
|
|
|
|
<!-- แถบเมนูด้านข้าง (Navigation Sidebar) -->
|
|
<q-drawer
|
|
v-model="leftDrawerOpen"
|
|
show-if-above
|
|
:width="280"
|
|
side="left"
|
|
bordered
|
|
class="bg-white dark:!bg-[#0f172a] border-none"
|
|
>
|
|
<AppSidebar />
|
|
</q-drawer>
|
|
|
|
<!-- พื้นที่แสดงเนื้อหาหลัก (Main Content Area) -->
|
|
<q-page-container>
|
|
<q-page class="px-3 py-6 md:p-8">
|
|
<div class="max-w-[1600px] mx-auto">
|
|
<slot />
|
|
</div>
|
|
</q-page>
|
|
</q-page-container>
|
|
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style>
|
|
/* Global Layout Adjustments */
|
|
.q-drawer--bordered {
|
|
border-right: 1px solid rgba(0,0,0,0.05) !important;
|
|
}
|
|
.dark .q-drawer--bordered {
|
|
border-right: 1px solid rgba(255,255,255,0.05) !important;
|
|
}
|
|
</style>
|