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

feat: Add default layout and AppSidebar component for authenticated users.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 14:03:55 +07:00
parent e94410d0e7
commit 62e9c9c566
2 changed files with 24 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,12 +14,6 @@ const navItems = computed(() => [
icon: "dashboard", // Using Material Icons names where possible or SVG paths
isSvg: false
},
{
to: "/dashboard/my-courses",
label: t('sidebar.myCourses'),
icon: "school",
isSvg: false
},
{
to: "/browse/discovery",
label: t('sidebar.browseCourses'),
@ -27,17 +21,11 @@ const navItems = computed(() => [
isSvg: false
},
{
to: "/dashboard/announcements",
label: t('sidebar.announcements'),
icon: "campaign",
to: "/dashboard/my-courses",
label: t('sidebar.myCourses'),
icon: "school",
isSvg: false
},
{
to: "/dashboard/profile",
label: t('sidebar.profile'),
icon: "person",
isSvg: false
},
}
]);
const handleNavigate = (path: string) => {
@ -50,19 +38,9 @@ const handleNavigate = (path: string) => {
<template>
<div class="flex flex-col h-full bg-white dark:bg-[#1e293b] border-r border-slate-200 dark:border-slate-700">
<!-- Branding / Logo Area -->
<div class="px-6 py-8 flex items-center gap-3 cursor-pointer group" @click="handleNavigate('/dashboard')">
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
E
</div>
<div class="flex flex-col">
<span class="font-black text-lg leading-none tracking-tight text-slate-900 dark:text-white">E-Learning</span>
<span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
</div>
</div>
<!-- Navigation Items -->
<q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3">
<q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3 pt-6">
<q-item
v-for="item in navItems"
:key="item.to"
@ -82,23 +60,6 @@ const handleNavigate = (path: string) => {
</q-item>
</q-list>
<!-- Sidebar Bottom: Logout & Version -->
<div class="p-4 border-t border-slate-100 dark:border-slate-700/50">
<q-btn
flat
rounded
class="w-full text-slate-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/10 transition-all font-bold"
no-caps
@click="() => useAuth().logout()"
>
<q-icon name="logout" size="20px" class="mr-3" />
{{ t('auth.logout') }}
</q-btn>
<div class="mt-4 px-4 text-center">
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Version 0.1.0 (Alpha)</p>
</div>
</div>
</div>
</template>

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

@ -7,18 +7,34 @@
// Initialize global theme management
useThemeMode()
const leftDrawerOpen = ref(false)
const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
<template>
<q-layout view="hHh lpr lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
<q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
<!-- Header -->
<q-header
bordered
class="!bg-white/80 dark:!bg-[#1e293b]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
>
<AppHeader />
<AppHeader @toggleSidebar="toggleLeftDrawer" />
</q-header>
<!-- Sidebar (Drawer) -->
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
:width="260"
class="!bg-white dark:!bg-[#1e293b] border-r border-slate-200 dark:border-slate-700"
>
<AppSidebar />
</q-drawer>
<!-- Main Content -->
<q-page-container>
<q-page class="relative">