feat: Implement core application layout, global styling, dark mode, and essential UI components.
This commit is contained in:
parent
84e4d478c7
commit
a2ce1d79a2
7 changed files with 87 additions and 67 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue