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

feat: Implement default authenticated layout, course card, and app sidebar components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:45:14 +07:00 • committed by JakkrapartXD
parent b51a7546e4
commit e34f2d84da
3 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Frontend-Learner/components/course/CourseCard.vue
View file

@ -50,7 +50,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
</script>
<template>
<div class="group relative flex flex-col !bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
<div class="group relative flex flex-col bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
<!-- Thumbnail Section -->
<div class="relative w-full aspect-video overflow-hidden">

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

@ -36,11 +36,11 @@ const handleNavigate = (path: string) => {
</script>
<template>
<div class="flex flex-col h-full bg-white dark:bg-[#1e293b] border-r border-slate-200 dark:border-slate-700">
<div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
<!-- Navigation Items -->
<q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3 pt-6">
<q-list padding class="text-slate-600 dark:text-slate-400 flex-grow px-3 pt-6">
<q-item
v-for="item in navItems"
:key="item.to"
@ -83,8 +83,8 @@ const handleNavigate = (path: string) => {
/* Dark Mode Active State Enhancement */
.dark .sidebar-item--active {
background: rgba(37, 99, 235, 0.15) !important;
color: #93c5fd !important; /* blue-300 */
background: rgba(59, 130, 246, 0.12) !important;
color: #60a5fa !important; /* blue-400 */
}
.dark .sidebar-item--active .q-icon {

6
Frontend-Learner/layouts/default.vue
View file

@ -15,11 +15,11 @@ const toggleLeftDrawer = () => {
</script>
<template>
<q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#020617] !text-slate-900 dark:!text-slate-50 font-sans">
<q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50 font-sans">
<!-- Header -->
<q-header
bordered
class="!bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-800"
class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-800"
>
<AppHeader @toggleSidebar="toggleLeftDrawer" />
</q-header>
@ -30,7 +30,7 @@ const toggleLeftDrawer = () => {
show-if-above
bordered
:width="280"
class="!bg-white dark:!bg-[#0f172a] border-r border-slate-200 dark:border-slate-800"
class="bg-white dark:!bg-[#0f172a] border-r border-slate-200 dark:border-slate-800"
>
<AppSidebar />
</q-drawer>