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
76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
/**
|
|
* @file useNavItems.ts
|
|
* @description Single Source of Truth for navigation items used across the app (Sidebar, Mobile Nav, User Menu).
|
|
*/
|
|
|
|
export interface NavItem {
|
|
to: string
|
|
labelKey: string
|
|
icon: string
|
|
showOn: ('sidebar' | 'mobile' | 'userMenu')[]
|
|
roles?: string[]
|
|
}
|
|
|
|
export const useNavItems = () => {
|
|
const allNavItems: NavItem[] = [
|
|
{
|
|
to: '/dashboard',
|
|
labelKey: 'sidebar.overview',
|
|
icon: 'dashboard',
|
|
showOn: ['sidebar', 'mobile', 'userMenu']
|
|
},
|
|
{
|
|
to: '/browse',
|
|
labelKey: 'sidebar.onlineCourses',
|
|
icon: 'video_library',
|
|
showOn: ['sidebar', 'mobile', 'userMenu']
|
|
},
|
|
{
|
|
to: '/browse/discovery',
|
|
labelKey: 'sidebar.recommendedCourses',
|
|
icon: 'auto_awesome',
|
|
showOn: ['sidebar', 'mobile', 'userMenu']
|
|
},
|
|
{
|
|
to: '/browse/discovery',
|
|
labelKey: 'sidebar.browseCourses',
|
|
icon: 'explore',
|
|
showOn: ['sidebar', 'mobile', 'userMenu']
|
|
},
|
|
{
|
|
to: '/dashboard/my-courses',
|
|
labelKey: 'sidebar.myCourses',
|
|
icon: 'school',
|
|
showOn: ['sidebar', 'mobile', 'userMenu']
|
|
},
|
|
{
|
|
to: '/dashboard/announcements',
|
|
labelKey: 'sidebar.announcements',
|
|
icon: 'campaign',
|
|
showOn: ['sidebar', 'mobile', 'userMenu']
|
|
},
|
|
{
|
|
to: '/dashboard/profile',
|
|
labelKey: 'sidebar.profile',
|
|
icon: 'person',
|
|
showOn: ['sidebar'] // Already in settings for userMenu
|
|
},
|
|
{
|
|
to: '/dashboard/profile',
|
|
labelKey: 'userMenu.settings',
|
|
icon: 'settings',
|
|
showOn: ['userMenu']
|
|
}
|
|
]
|
|
|
|
const sidebarItems = computed(() => allNavItems.filter(item => item.showOn.includes('sidebar')))
|
|
const mobileItems = computed(() => allNavItems.filter(item => item.showOn.includes('mobile')))
|
|
const userMenuItems = computed(() => allNavItems.filter(item => item.showOn.includes('userMenu')))
|
|
|
|
return {
|
|
allNavItems,
|
|
sidebarItems,
|
|
mobileItems,
|
|
userMenuItems
|
|
}
|
|
}
|