feat: Add default layout and AppSidebar component for authenticated users.

This commit is contained in:
supalerk-ar66 2026-02-09 14:03:55 +07:00
parent e94410d0e7
commit 62e9c9c566
2 changed files with 24 additions and 47 deletions

View file

@ -7,18 +7,34 @@
// Initialize global theme management
useThemeMode()
const leftDrawerOpen = ref(false)
const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
<template>
<q-layout view="hHh lpr lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
<q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
<!-- Header -->
<q-header
bordered
class="!bg-white/80 dark:!bg-[#1e293b]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
>
<AppHeader />
<AppHeader @toggleSidebar="toggleLeftDrawer" />
</q-header>
<!-- Sidebar (Drawer) -->
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
:width="260"
class="!bg-white dark:!bg-[#1e293b] border-r border-slate-200 dark:border-slate-700"
>
<AppSidebar />
</q-drawer>
<!-- Main Content -->
<q-page-container>
<q-page class="relative">