79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
/**
|
|
* @file useNavItems.ts
|
|
* @description ศูนย์รวมจัดการเมนูนำทาง (Navigation Items) เพื่อให้ใช้ข้อมูลชุดเดียวกันทั้งเว็บ
|
|
* (เช่น เมนูด้านข้าง, เมนูบนมือถือ, และเมนูโปรไฟล์ผู้ใช้)
|
|
*/
|
|
|
|
export interface NavItem {
|
|
to: string // ลิงก์ปลายทาง
|
|
labelKey: string // คีย์ภาษาสำหรับ i18n
|
|
icon: string // ไอคอนจาก Material Icons
|
|
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: ['mobile']
|
|
},
|
|
{
|
|
to: '/browse/discovery',
|
|
labelKey: 'sidebar.recommendedCourses',
|
|
icon: 'auto_awesome',
|
|
showOn: ['mobile']
|
|
},
|
|
{
|
|
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: ['mobile']
|
|
},
|
|
{
|
|
to: '/dashboard/profile',
|
|
labelKey: 'sidebar.profile',
|
|
icon: 'person',
|
|
showOn: [] // Was ['sidebar']
|
|
},
|
|
{
|
|
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
|
|
}
|
|
}
|