3fa236cff5
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 41s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file AppSidebar.vue
|
|
* @description Sidebar navigation for the authenticated dashboard.
|
|
* Uses Quasar QList for structure.
|
|
*/
|
|
|
|
const { sidebarItems } = useNavItems()
|
|
const { t } = useI18n()
|
|
const navItems = sidebarItems
|
|
|
|
|
|
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">{{ $t(item.labelKey) }}</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>
|