97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file AppSidebar.vue
|
|
* @description Sidebar navigation for the authenticated dashboard.
|
|
* Uses Quasar QList for structure.
|
|
*/
|
|
|
|
const { t } = useI18n()
|
|
|
|
const navItems = computed(() => [
|
|
{
|
|
to: "/dashboard",
|
|
label: t('sidebar.overview'),
|
|
icon: "dashboard", // Using Material Icons names where possible or SVG paths
|
|
isSvg: false
|
|
},
|
|
{
|
|
to: "/browse/discovery",
|
|
label: t('sidebar.browseCourses'),
|
|
icon: "explore",
|
|
isSvg: false
|
|
},
|
|
{
|
|
to: "/dashboard/my-courses",
|
|
label: t('sidebar.myCourses'),
|
|
icon: "school",
|
|
isSvg: false
|
|
}
|
|
]);
|
|
|
|
const handleNavigate = (path: string) => {
|
|
if (import.meta.client) {
|
|
window.location.href = path
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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-400 flex-grow px-3 pt-6">
|
|
<q-item
|
|
v-for="item in navItems"
|
|
:key="item.to"
|
|
clickable
|
|
v-ripple
|
|
@click="handleNavigate(item.to)"
|
|
class="rounded-xl mb-1 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
:class="{ 'sidebar-item--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon :name="item.icon" size="22px" />
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-item-label class="font-bold text-sm">{{ item.label }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sidebar-item--active {
|
|
background: #eff6ff !important; /* blue-50 */
|
|
color: #1d4ed8 !important; /* blue-700 */
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-item--active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 15%;
|
|
height: 70%;
|
|
width: 4px;
|
|
background: #2563eb;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
/* Dark Mode Active State Enhancement */
|
|
.dark .sidebar-item--active {
|
|
background: rgba(59, 130, 246, 0.12) !important;
|
|
color: #60a5fa !important; /* blue-400 */
|
|
}
|
|
|
|
.dark .sidebar-item--active .q-icon {
|
|
color: #60a5fa !important; /* blue-400 */
|
|
}
|
|
|
|
.dark .sidebar-item--active::before {
|
|
background: #3b82f6;
|
|
}
|
|
</style>
|