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

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>