feat: Implement core application layout, global styling, dark mode, and essential UI components.

This commit is contained in:
supalerk-ar66 2026-01-26 12:59:19 +07:00
parent 84e4d478c7
commit a2ce1d79a2
7 changed files with 87 additions and 67 deletions

View file

@ -13,9 +13,12 @@ const toggleLeftDrawer = () => {
</script>
<template>
<q-layout view="hHh lpr lFf" class="bg-slate-50 font-inter">
<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 text-slate-800">
<q-header
bordered
class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
>
<AppHeader @toggle-sidebar="toggleLeftDrawer" />
</q-header>
@ -23,7 +26,7 @@ const toggleLeftDrawer = () => {
<q-drawer
v-model="leftDrawerOpen"
bordered
class="bg-white"
class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-r border-slate-200 dark:border-slate-700"
:width="260"
>
<AppSidebar />
@ -37,7 +40,11 @@ const toggleLeftDrawer = () => {
</q-page-container>
<!-- Mobile Bottom Nav -->
<q-footer v-if="$q.screen.lt.md" bordered class="bg-white text-primary">
<q-footer
v-if="$q.screen.lt.md"
bordered
class="!bg-white dark:!bg-[#1e293b] text-primary border-t border-slate-200 dark:border-slate-700"
>
<MobileNav />
</q-footer>
</q-layout>