feat: Add initial pages and components for user dashboard, profile, course discovery, and classroom learning with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 47s
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
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 47s
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
This commit is contained in:
supalerk-ar66
parent
f26a94076c
commit
e3873f616e
11 changed files with 1046 additions and 685 deletions
|
|
@ -5,39 +5,43 @@
|
|||
* Uses Quasar QToolbar.
|
||||
*/
|
||||
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
/** Controls visibility of the search bar */
|
||||
showSearch?: boolean
|
||||
showSearch?: boolean;
|
||||
/** Controls visibility of the sidebar toggle button */
|
||||
showSidebarToggle?: boolean
|
||||
showSidebarToggle?: boolean;
|
||||
/** Type of navigation links to display */
|
||||
navType?: 'public' | 'learner'
|
||||
}>()
|
||||
navType?: "public" | "learner";
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** Emitted when the hamburger menu is clicked */
|
||||
toggleSidebar: []
|
||||
}>()
|
||||
toggleSidebar: [];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
// Automatically determine navType based on route if not explicitly passed
|
||||
const navTypeComputed = computed(() => {
|
||||
if (props.navType) return props.navType
|
||||
if (props.navType) return props.navType;
|
||||
// Show learner nav for dashboard, browse, classroom, and course details
|
||||
const learnerRoutes = ['/dashboard', '/browse', '/classroom', '/course']
|
||||
return learnerRoutes.some(r => route.path.startsWith(r)) ? 'learner' : 'public'
|
||||
})
|
||||
const learnerRoutes = ["/dashboard", "/browse", "/classroom", "/course"];
|
||||
return learnerRoutes.some((r) => route.path.startsWith(r))
|
||||
? "learner"
|
||||
: "public";
|
||||
});
|
||||
|
||||
const searchText = ref('')
|
||||
const searchText = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar class="bg-white text-slate-900 h-16 shadow-sm border-none p-0">
|
||||
<div class="container mx-auto w-full px-6 md:px-12 flex items-center h-full">
|
||||
<div
|
||||
class="container mx-auto w-full px-6 md:px-12 flex items-center h-full"
|
||||
>
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<q-btn
|
||||
v-if="showSidebarToggle !== false && navTypeComputed !== 'learner'"
|
||||
|
|
@ -50,22 +54,35 @@ const searchText = ref('')
|
|||
/>
|
||||
|
||||
<!-- Branding -->
|
||||
<div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard')">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="flex items-center gap-3 cursor-pointer group"
|
||||
@click="navigateTo('/dashboard')"
|
||||
>
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform"
|
||||
>
|
||||
E
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black text-lg leading-none tracking-tight text-slate-900 group-hover:text-blue-600 transition-colors">E-Learning</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
|
||||
<span
|
||||
class="font-black text-lg leading-none tracking-tight text-slate-900 group-hover:text-blue-600 transition-colors"
|
||||
>E-Learning</span
|
||||
>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500"
|
||||
>Platform</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center min-w-[200px] md:min-w-[320px] max-w-sm ml-8 mr-8 h-10">
|
||||
<div
|
||||
class="flex items-center min-w-[200px] md:min-w-[320px] max-w-sm ml-8 mr-8 h-10"
|
||||
>
|
||||
<q-input
|
||||
v-model="searchText"
|
||||
dense
|
||||
borderless
|
||||
placeholder="ค้นหาคอร์สเรียน..."
|
||||
:placeholder="$t('menu.searchCourses')"
|
||||
class="search-input w-full bg-slate-100/60 px-4 rounded-full transition-all duration-300 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-100 h-full flex items-center"
|
||||
@keyup.enter="navigateTo(`/browse/discovery?search=${searchText}`)"
|
||||
>
|
||||
|
|
@ -77,42 +94,66 @@ const searchText = ref('')
|
|||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="flex items-center gap-8 text-[14px] font-bold text-slate-600">
|
||||
|
||||
<!-- Learner Navigation (Dashboard Mode) -->
|
||||
<template v-if="navTypeComputed === 'learner'">
|
||||
<NuxtLink to="/dashboard" class="hover:text-blue-600 transition-colors uppercase tracking-wider" active-class="text-blue-600">
|
||||
หน้าหลัก
|
||||
<NuxtLink
|
||||
to="/dashboard"
|
||||
class="hover:text-blue-600 transition-colors uppercase tracking-wider"
|
||||
active-class="text-blue-600"
|
||||
>
|
||||
{{ $t("sidebar.overview") }}
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/browse/discovery" class="hover:text-blue-600 transition-colors uppercase tracking-wider" active-class="text-blue-600">
|
||||
คอร์สเรียนทั้งหมด
|
||||
<NuxtLink
|
||||
to="/browse/discovery"
|
||||
class="hover:text-blue-600 transition-colors uppercase tracking-wider"
|
||||
active-class="text-blue-600"
|
||||
>
|
||||
{{ $t("landing.allCourses") }}
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/dashboard/my-courses" class="hover:text-blue-600 transition-colors uppercase tracking-wider" active-class="text-blue-600">
|
||||
{{ $t('sidebar.myCourses') || 'คอร์สเรียนของฉัน' }}
|
||||
<NuxtLink
|
||||
to="/dashboard/my-courses"
|
||||
class="hover:text-blue-600 transition-colors uppercase tracking-wider"
|
||||
active-class="text-blue-600"
|
||||
>
|
||||
{{ $t("sidebar.myCourses") || "คอร์สเรียนของฉัน" }}
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<!-- Public Navigation (Default) -->
|
||||
<template v-else>
|
||||
<div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
|
||||
<div
|
||||
class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors"
|
||||
>
|
||||
คอร์สเรียนทั้งหมด <q-icon name="keyboard_arrow_down" />
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item clickable v-close-popup to="/browse">
|
||||
<q-item-section>ทั้งหมด</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item clickable v-close-popup to="/browse">
|
||||
<q-item-section>ทั้งหมด</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
|
||||
<div
|
||||
class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors"
|
||||
>
|
||||
หลักสูตร Onsite <q-icon name="keyboard_arrow_down" />
|
||||
</div>
|
||||
<NuxtLink to="/browse/recommended" class="hover:text-purple-600 transition-colors">
|
||||
<NuxtLink
|
||||
to="/browse/recommended"
|
||||
class="hover:text-purple-600 transition-colors"
|
||||
>
|
||||
คอร์สแนะนำ
|
||||
</NuxtLink>
|
||||
<div class="cursor-pointer hover:text-purple-600 transition-colors">บทความ</div>
|
||||
<div class="cursor-pointer hover:text-purple-600 transition-colors">สมาชิกรายปี</div>
|
||||
<div class="cursor-pointer hover:text-purple-600 transition-colors">สำหรับองค์กร</div>
|
||||
<div class="cursor-pointer hover:text-purple-600 transition-colors">
|
||||
บทความ
|
||||
</div>
|
||||
<div class="cursor-pointer hover:text-purple-600 transition-colors">
|
||||
สมาชิกรายปี
|
||||
</div>
|
||||
<div class="cursor-pointer hover:text-purple-600 transition-colors">
|
||||
สำหรับองค์กร
|
||||
</div>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
|
|
@ -122,10 +163,9 @@ const searchText = ref('')
|
|||
<div class="flex items-center gap-2 sm:gap-4 text-gray-500">
|
||||
<!-- Search Icon -->
|
||||
|
||||
|
||||
<!-- Language -->
|
||||
<!-- Language -->
|
||||
<LanguageSwitcher />
|
||||
|
||||
|
||||
<!-- User Profile -->
|
||||
<UserMenu />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue