feat: Implement initial application layouts, global navigation, and course browsing pages with i18n support.

Frontend-Learner/composables/useNavItems.ts

@@ -0,0 +1,76 @@
+/**
+ * @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
+  }
+}