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

feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:26:58 +07:00
parent a54251f11e
commit a8339ed0ab
8 changed files with 99 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

29
Frontend-Learner/components/layout/AppSidebar.vue
View file

@ -63,22 +63,17 @@ const handleNavigate = (path: string) => {
</div>
</template>
<style>
/* Active State styling for Sidebar items */
<style scoped>
.sidebar-item--active {
background: rgb(239 246 255) !important; /* blue-50 */
color: rgb(29 78 216) !important; /* blue-700 */
background: #eff6ff !important; /* blue-50 */
color: #1d4ed8 !important; /* blue-700 */
position: relative;
}
.sidebar-item--active .q-icon {
color: rgb(37 99 235) !important; /* blue-600 */
}
/* Vertical indicator for active item */
.sidebar-item--active::after {
content: "";
.sidebar-item--active::before {
content: '';
position: absolute;
left: -12px;
left: 0;
top: 15%;
height: 70%;
width: 4px;
@ -86,17 +81,17 @@ const handleNavigate = (path: string) => {
border-radius: 0 4px 4px 0;
}
/* Dark Mode Active State */
/* Dark Mode Active State Enhancement */
.dark .sidebar-item--active {
background: rgba(37, 99, 235, 0.15) !important;
color: rgb(147 197 253) !important; /* blue-300 */
color: #93c5fd !important; /* blue-300 */
}
.dark .sidebar-item--active .q-icon {
color: rgb(96 165 250) !important; /* blue-400 */
color: #60a5fa !important; /* blue-400 */
}
.dark .sidebar-item--active::after {
background: #60a5fa;
.dark .sidebar-item--active::before {
background: #3b82f6;
}
</style>