elearning/Frontend-Learner/layouts/default.vue

65 lines
1.5 KiB
Vue

<script setup lang="ts">
/**
* @file default.vue
* @description Master layout for the EduLearn platform.
*/
useThemeMode()
const leftDrawerOpen = ref(true)
const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value
}
const route = useRoute()
// Show sidebar for these routes
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>