From 3fa236cff54da2e1d3d3cac6dd7ebb9a5289d4a0 Mon Sep 17 00:00:00 2001 From: supalerk-ar66 Date: Wed, 18 Feb 2026 16:28:29 +0700 Subject: [PATCH] feat: Implement initial application layouts, global navigation, and course browsing pages with i18n support. --- .../components/layout/AppHeader.vue | 11 + .../components/layout/AppSidebar.vue | 24 +- .../components/layout/LandingHeader.vue | 51 +- .../components/layout/MobileNav.vue | 11 +- Frontend-Learner/components/user/UserMenu.vue | 13 +- Frontend-Learner/composables/useNavItems.ts | 76 ++ Frontend-Learner/i18n/locales/en.json | 2 + Frontend-Learner/i18n/locales/th.json | 2 + Frontend-Learner/layouts/default.vue | 2 +- Frontend-Learner/layouts/landing.vue | 8 +- Frontend-Learner/pages/browse/index.vue | 134 +++- Frontend-Learner/pages/browse/recommended.vue | 349 +++++++++ Frontend-Learner/pages/index.vue | 702 ++++++++++-------- Frontend-Learner/public/img/elearning.png | Bin 0 -> 245065 bytes Frontend-Learner/คู่มืออธิบาย/Error.md | 0 15 files changed, 993 insertions(+), 392 deletions(-) create mode 100644 Frontend-Learner/composables/useNavItems.ts create mode 100644 Frontend-Learner/pages/browse/recommended.vue create mode 100644 Frontend-Learner/public/img/elearning.png create mode 100644 Frontend-Learner/คู่มืออธิบาย/Error.md diff --git a/Frontend-Learner/components/layout/AppHeader.vue b/Frontend-Learner/components/layout/AppHeader.vue index f92a1353..373e8dfe 100644 --- a/Frontend-Learner/components/layout/AppHeader.vue +++ b/Frontend-Learner/components/layout/AppHeader.vue @@ -41,6 +41,17 @@ const searchText = ref('') Platform + + + diff --git a/Frontend-Learner/components/layout/AppSidebar.vue b/Frontend-Learner/components/layout/AppSidebar.vue index e8c28dac..6cdea9ef 100644 --- a/Frontend-Learner/components/layout/AppSidebar.vue +++ b/Frontend-Learner/components/layout/AppSidebar.vue @@ -5,28 +5,10 @@ * Uses Quasar QList for structure. */ +const { sidebarItems } = useNavItems() const { t } = useI18n() +const navItems = sidebarItems -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) { @@ -55,7 +37,7 @@ const handleNavigate = (path: string) => { - {{ item.label }} + {{ $t(item.labelKey) }} diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue index abb1f85d..dc31add9 100644 --- a/Frontend-Learner/components/layout/LandingHeader.vue +++ b/Frontend-Learner/components/layout/LandingHeader.vue @@ -27,10 +27,8 @@ onMounted(() => { :class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']" >
- -
+ +
@@ -53,35 +51,28 @@ onMounted(() => { -
- +