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

@ -19,7 +19,7 @@ const searchText = ref('')
</script>
<template>
<q-toolbar class="bg-white text-slate-800 border-b border-gray-100 h-16 px-4">
<q-toolbar class="bg-transparent text-slate-800 dark:text-white h-16 px-4">
<!-- Mobile Menu Toggle -->
<q-btn
flat
@ -27,7 +27,7 @@ const searchText = ref('')
dense
icon="menu"
@click="emit('toggleSidebar')"
class="md:hidden mr-2"
class="md:hidden mr-2 text-slate-700 dark:text-white"
aria-label="Menu"
/>
@ -36,7 +36,7 @@ const searchText = ref('')
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold">
E
</div>
<span class="font-bold text-xl text-blue-600 hidden xs:block">e-Learning</span>
<span class="font-bold text-xl text-blue-600 dark:text-blue-400 hidden xs:block">e-Learning</span>
</div>
<q-space />
@ -49,8 +49,8 @@ const searchText = ref('')
rounded
v-model="searchText"
:placeholder="$t('menu.searchCourses')"
class="bg-slate-50 search-input"
bg-color="slate-50"
class="bg-slate-50 dark:bg-slate-700/50 search-input"
bg-color="transparent"
>
<template v-slot:prepend>
<q-icon name="search" class="text-slate-400" />