chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
Frontend-Learner/components/common/AppHeader.vue
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" />

22
Frontend-Learner/components/common/AppSidebar.vue
View file

@ -42,10 +42,10 @@ const navItems = computed(() => [
</script>
<template>
<div class="flex flex-col h-full bg-white">
<div class="flex flex-col h-full bg-transparent">
<!-- Branding Area (Optional if not in Header) -->
<q-list padding class="text-slate-600 flex-grow">
<q-list padding class="text-slate-600 dark:text-slate-300 flex-grow">
<q-item
@ -54,8 +54,7 @@ const navItems = computed(() => [
:to="item.to"
clickable
v-ripple
active-class="text-primary bg-blue-50 font-bold"
class="rounded-r-full mr-2"
class="rounded-r-full mr-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
>
<q-item-section avatar>
<q-icon :name="item.icon" />
@ -75,6 +74,17 @@ const navItems = computed(() => [
</div>
</template>
<style scoped>
/* Custom styles if needed */
<style>
/* Light Mode Active State */
.q-item.q-router-link--active {
background: rgb(239 246 255); /* blue-50 */
color: rgb(29 78 216); /* blue-700 */
font-weight: 700;
}
/* Dark Mode Active State */
.dark .q-item.q-router-link--active {
background: rgba(255, 255, 255, 0.1);
color: rgb(147 197 253); /* blue-300 */
}
</style>