<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>
