feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -1,16 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file AppHeader.vue
|
||||
* @description The main header for the EduLearn application dashboard.
|
||||
* @description แถบเมนูด้านบนหลัก (Header) สำหรับหน้าแดชบอร์ด (Dashboard) ของระบบ EduLearn
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
/** Controls visibility of the sidebar toggle button */
|
||||
/** ควบคุมการแสดงผลของปุ่มเปิด/ปิดแถบเมนูด้านข้าง (Sidebar) */
|
||||
showSidebarToggle?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** Emitted when the hamburger menu is clicked */
|
||||
/** ส่งสัญญาณ (Emit) เมื่อผู้ใช้คลิกที่ปุ่มแฮมเบอร์เกอร์เมนู */
|
||||
toggleSidebar: [];
|
||||
}>();
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ const toggleTheme = () => {
|
|||
<template>
|
||||
<q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
|
||||
|
||||
<!-- Left: Hamburger Toggle -->
|
||||
<!-- ด้านซ้าย: ปุ่มย่อขยายแถบเมนูด้านข้าง (Hamburger Toggle) -->
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -43,10 +43,10 @@ const toggleTheme = () => {
|
|||
|
||||
<q-space />
|
||||
|
||||
<!-- Right Section -->
|
||||
<!-- ส่วนการตั้งค่าทางด้านขวา (Right Section) -->
|
||||
<div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<!-- ปุ่มสลับธีม (Theme Toggle) -->
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -60,7 +60,7 @@ const toggleTheme = () => {
|
|||
<q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<!-- Language Switcher (Pill Style) -->
|
||||
<!-- ตัวสลับภาษาแบบแคปซูล (Language Switcher) -->
|
||||
<div
|
||||
@click="toggleLanguage"
|
||||
class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
|
||||
|
|
@ -70,7 +70,7 @@ const toggleTheme = () => {
|
|||
<div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<!-- เส้นคั่น (Divider) -->
|
||||
<div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>
|
||||
|
||||
<!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
|
||||
|
|
@ -102,12 +102,12 @@ const toggleTheme = () => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Ensure toolbar height is consistent */
|
||||
/* บังคับให้ความสูงของ Header เท่ากันเสมอ (Ensure toolbar height is consistent) */
|
||||
:deep(.q-toolbar) {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* Hide user name only on small mobile screens */
|
||||
/* ซ่อนชื่อผู้ใช้ไว้เฉพาะบนหน้าจอมือถือขนาดเล็กเท่านั้น (Hide user name only on small mobile screens) */
|
||||
@media (max-width: 600px) {
|
||||
.user-info-text {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const handleLogout = () => {
|
|||
<template>
|
||||
<div class="flex flex-col h-full bg-white dark:!bg-[#04091a] px-4 py-6 border-r border-slate-100 dark:border-slate-800">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<!-- โลโก้แบรนด์ (Logo Section) -->
|
||||
<div class="flex items-center gap-3 px-2 mb-10 transition-transform active:scale-95 cursor-pointer" @click="navigateTo('/dashboard')">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<q-icon name="school" color="white" size="24px" />
|
||||
|
|
@ -59,7 +59,7 @@ const handleLogout = () => {
|
|||
<span class="text-[22px] font-black tracking-tight text-slate-800 dark:text-white">EduLearn</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<!-- การนำทางหลัก (Main Navigation) -->
|
||||
<div class="space-y-1 mb-8">
|
||||
<NuxtLink
|
||||
v-for="item in menuItems"
|
||||
|
|
@ -71,12 +71,12 @@ const handleLogout = () => {
|
|||
<q-icon :name="item.icon" size="24px" class="transition-colors" />
|
||||
<span class="font-bold text-[15px]">{{ item.label }}</span>
|
||||
|
||||
<!-- Active Indicator -->
|
||||
<!-- ตัวบ่งชี้หน้าปัจจุบัน (Active Indicator) -->
|
||||
<div v-if="route.path === item.to" class="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-6 bg-blue-600 rounded-r-full shadow-[2px_0_8px_rgba(37,99,235,0.4)]"></div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Account Section -->
|
||||
<!-- หมวดหมู่บัญชี (Account Section) -->
|
||||
<div class="px-4 mb-4">
|
||||
<span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">{{ $t('sidebar.accountGroup') }}</span>
|
||||
</div>
|
||||
|
|
@ -92,7 +92,7 @@ const handleLogout = () => {
|
|||
<span class="font-bold text-[15px]">{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<!-- ปุ่มออกจากระบบ (Logout Button) -->
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="w-full flex items-center gap-4 px-4 py-3 rounded-2xl transition-all text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 font-bold text-[15px] group"
|
||||
|
|
@ -104,7 +104,7 @@ const handleLogout = () => {
|
|||
|
||||
<q-space />
|
||||
|
||||
<!-- Promo Card -->
|
||||
<!-- การ์ดโปรโมชั่น (Promo Card) -->
|
||||
<div class="mt-auto p-5 rounded-[2rem] bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 relative overflow-hidden group">
|
||||
<div class="relative z-10">
|
||||
<h4 class="font-black text-slate-800 dark:text-white text-sm mb-1">{{ $t('sidebar.promoTitle') }}</h4>
|
||||
|
|
@ -118,7 +118,7 @@ const handleLogout = () => {
|
|||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- Subtle background decoration -->
|
||||
<!-- การตกแต่งพื้นหลังแบบจางๆ (Subtle background decoration) -->
|
||||
<div class="absolute -right-2 -bottom-2 w-16 h-16 bg-blue-500/5 rounded-full blur-xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file LandingFooter.vue
|
||||
* @description Footer component for the landing page - Adjusted to Image 2 (E-Learning Platform Branding)
|
||||
* @description ส่วนท้ายของหน้าแรก (Footer component for the landing page)
|
||||
*/
|
||||
</script>
|
||||
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<footer class="bg-white pt-16 pb-8 border-t border-slate-200">
|
||||
<div class="container mx-auto px-6 md:px-12">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
|
||||
<!-- Brand -->
|
||||
<!-- โลโก้และชื่อแบรนด์ (Brand) -->
|
||||
<div class="space-y-6">
|
||||
<NuxtLink to="/" class="flex items-center gap-3 group">
|
||||
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<!-- ลิงก์ต่างๆ (Links) -->
|
||||
<div class="lg:pl-8">
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Support -->
|
||||
<!-- การสนับสนุนผู้ใช้ (Support) -->
|
||||
<div>
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
|
||||
|
|
@ -50,11 +50,11 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Contact (Bronco Hourse Data) -->
|
||||
<!-- ข้อมูลการติดต่อ (Contact) -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="font-bold text-slate-900 text-base">ติดต่อเรา</h4>
|
||||
<div class="flex flex-col gap-5">
|
||||
<!-- Location -->
|
||||
<!-- สถานที่ตั้ง (Location) -->
|
||||
<div class="flex flex-row items-start gap-4 flex-nowrap">
|
||||
<q-icon name="o_location_on" size="20px" color="slate-800" />
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
|
|
@ -65,18 +65,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<!-- เบอร์โทรศัพท์ (Phone) -->
|
||||
<div class="flex flex-row items-center gap-4 flex-nowrap">
|
||||
<q-icon name="o_phone" size="18px" color="slate-800" />
|
||||
<a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
<a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm hover:text-blue-600 transition-colors truncate">
|
||||
052-076-025
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<!-- อีเมล (Email) -->
|
||||
<div class="flex flex-row items-center gap-4 flex-nowrap">
|
||||
<q-icon name="o_email" size="18px" color="slate-800" />
|
||||
<a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
<a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 transition-colors truncate">
|
||||
info@chamomind.com
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Bar (Centered Copyright) -->
|
||||
<!-- แถบด้านล่างสำหรับสงวนลิขสิทธิ์ (Bottom Bar - Centered Copyright) -->
|
||||
<div class="pt-8 border-t border-slate-200 text-center">
|
||||
<p class="text-sm text-slate-400 font-medium tracking-wide">
|
||||
Copyright © CHAMOMIND CO., LTD. 2023
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file LandingHeader.vue
|
||||
* @description The main header for the public landing pages.
|
||||
* Features a transparent background that becomes solid/glass upon scrolling.
|
||||
* Responsive: Collapses into a drawer on mobile (md breakpoint).
|
||||
* @description คอมโพเนนต์แถบเมนูด้านบน (Header Navigation) สำหรับหน้า Landing Page และหน้าเปิดอื่นๆ
|
||||
* รองรับการเปลี่ยนภาษา เปลี่ยนโหมดสว่าง/มืด และเข้าถึงเมนูผู้ใช้ (Profile/Logout)
|
||||
*/
|
||||
const text = ref('');
|
||||
|
||||
// Track scrolling state to adjust header styling
|
||||
// ติดตามสถานะการเลื่อนเมาส์ (scroll) เพื่อปรับรูปแบบของ Header
|
||||
const isScrolled = ref(false)
|
||||
const { isAuthenticated } = useAuth()
|
||||
// Mobile Drawer State
|
||||
// สถานะเมนูสำหรับหน้าจอมือถือ (Mobile Drawer State)
|
||||
// ตัวแปรควบคุมการเปิด/ปิดเมนูบนหน้าจอขนาดเล็ก (Mobile Drawer)
|
||||
const mobileMenuOpen = ref(false)
|
||||
|
||||
const handleScroll = () => {
|
||||
isScrolled.value = window.scrollY > 20
|
||||
}
|
||||
|
||||
// Lock body scroll when mobile menu is open
|
||||
// ปิดการเลื่อนหน้าเว็บ (Lock body scroll) เมื่อเปิดเมนูบนมือถือ
|
||||
watch(mobileMenuOpen, (isOpen) => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
|
|
@ -32,21 +31,21 @@ onMounted(() => {
|
|||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
document.body.style.overflow = '' // Cleanup
|
||||
document.body.style.overflow = '' // คืนค่าเริ่มต้น (Cleanup)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--
|
||||
Header Container
|
||||
- Transitions between transparent and glass effect based on scroll.
|
||||
คอนเทนเนอร์ของ Header (Header Container)
|
||||
- เปลี่ยนจากสีใส (transparent) เป็นเอฟเฟกต์กระจก (glass effect) เมื่อเลื่อนเมาส์ลง
|
||||
-->
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-[100] transition-all"
|
||||
:class="[isScrolled ? 'h-20 glass-nav shadow-lg' : 'h-20 bg-transparent duration-300 border-b border-b-grey-7 ']"
|
||||
>
|
||||
<div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
|
||||
<!-- Left Section: Logo -->
|
||||
<!-- ด้านซ้าย: โลโก้แบรนด์ (Left Section: Logo) -->
|
||||
<NuxtLink to="/" class="flex items-center gap-3 group">
|
||||
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<q-icon name="o_school" size="24px" />
|
||||
|
|
@ -67,7 +66,7 @@ onUnmounted(() => {
|
|||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Desktop Navigation (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
|
||||
<!-- การนำทางสำหรับเดสก์ท็อป (แสดงผลเป็นค่าเริ่มต้น, ซ่อนบนมือถือผ่าน CSS 'desktop-nav') -->
|
||||
<!-- <nav class="flex desktop-nav items-center gap-8 text-[16px] font-medium">
|
||||
<NuxtLink
|
||||
to="/browse"
|
||||
|
|
@ -89,10 +88,10 @@ onUnmounted(() => {
|
|||
|
||||
|
||||
|
||||
<!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
|
||||
<!-- ปุ่มปฏิบัติการสำหรับเดสก์ท็อป (แสดงผลเป็นค่าเริ่มต้น, ซ่อนบนมือถือผ่าน CSS 'desktop-nav') -->
|
||||
<div class="flex desktop-nav items-center gap-4">
|
||||
<template v-if="!isAuthenticated">
|
||||
<!-- Login Button -->
|
||||
<!-- ปุ่มเข้าสู่ระบบ (Login Button) -->
|
||||
<NuxtLink
|
||||
to="/auth/login"
|
||||
class="px-5 py-4 rounded-full text-slate-700 font-semibold text-sm transition-all hover:-translate-y-0.5"
|
||||
|
|
@ -101,7 +100,7 @@ onUnmounted(() => {
|
|||
{{ $t('auth.login') }}
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Register Button -->
|
||||
<!-- ปุ่มสมัครสมาชิก (Register Button) -->
|
||||
<NuxtLink
|
||||
to="/auth/register"
|
||||
class="px-5 py-4 rounded-full bg-blue-600 text-white font-semibold text-sm hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
|
||||
|
|
@ -120,7 +119,7 @@ onUnmounted(() => {
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button (Visible on Mobile) -->
|
||||
<!-- ปุ่มเปิดเมนูบนมือถือ (แสดงผลเฉพาะบน Mobile) -->
|
||||
<button
|
||||
class="md:hidden mobile-toggle ml-auto relative z-[120] w-10 h-10 flex items-center justify-center rounded-full transition-colors"
|
||||
:class="[isScrolled ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100', mobileMenuOpen ? 'text-slate-900 z-[120]' : '']"
|
||||
|
|
@ -132,7 +131,7 @@ onUnmounted(() => {
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Navigation Drawer (Teleported to body to avoid z-index/clipping issues with Header) -->
|
||||
<!-- ลิ้นชักเมนูด้านข้างสำหรับมือถือ (Mobile Navigation Drawer - แยกส่วนไปยัง body เพื่อไม่ให้มีปัญหา z-index หรือถูกบัง) -->
|
||||
<Teleport to="body">
|
||||
<div v-if="mobileMenuOpen">
|
||||
<div
|
||||
|
|
@ -146,7 +145,7 @@ onUnmounted(() => {
|
|||
:class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
|
||||
>
|
||||
<div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
|
||||
<!-- Close Button -->
|
||||
<!-- ปุ่มปิดเมนู (Close Button) -->
|
||||
<button
|
||||
class="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors"
|
||||
@click="mobileMenuOpen = false"
|
||||
|
|
@ -154,7 +153,7 @@ onUnmounted(() => {
|
|||
<q-icon name="close" size="20px" />
|
||||
</button>
|
||||
|
||||
<!-- Mobile Links -->
|
||||
<!-- ลิงก์สำหรับมือถือ (Mobile Links) -->
|
||||
<nav class="flex flex-col gap-2 mt-8">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
|
|
@ -210,14 +209,14 @@ onUnmounted(() => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Glassmorphism Effect for Scrolled Header */
|
||||
/* เอฟเฟกต์ Glassmorphism สำหรับ Header ตอนเลื่อนเมาส์ลง */
|
||||
.glass-nav {
|
||||
background: rgba(15, 23, 42, 0.95); /* Darker background for legibility */
|
||||
background: rgba(15, 23, 42, 0.95); /* พื้นหลังเข้มขึ้นเพื่อให้อ่านตัวหนังสือชัดเจน */
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Premium Primary Button Styling */
|
||||
/* สไตล์ปุ่มหลัก (Primary Button) แบบพรีเมียม */
|
||||
.btn-primary-premium {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
|
|
@ -236,7 +235,7 @@ onUnmounted(() => {
|
|||
box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
|
||||
}
|
||||
|
||||
/* Secondary Premium Button Styling */
|
||||
/* สไตล์ปุ่มดรอง (Secondary Button) แบบพรีเมียม */
|
||||
.btn-secondary-premium {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
|
|
@ -260,11 +259,11 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
/*
|
||||
Force Visibility Logic to bypass potential Tailwind Build issues
|
||||
Ensures Desktop and Mobile parts are strictly separated
|
||||
โลจิกบังคับการแสดงผล เพื่อแก้ปัญหาการคอมไฟล์ของ Tailwind
|
||||
ยืนยันว่าส่วน Desktop และ Mobile เลย์เอาต์แยกจากกันอย่างชัดเจน
|
||||
*/
|
||||
.desktop-nav {
|
||||
display: flex; /* Default to visible */
|
||||
display: flex; /* แสดงผลเป็นค่าเริ่มต้น */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const handleNavigate = (path: string) => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Optional shadow for better separation */
|
||||
/* เงาด้านบนแบบบางๆ เพื่อแบ่งส่วนล่างให้ชัดเจนขึ้น (Optional shadow for better separation) */
|
||||
.shadow-up-1 {
|
||||
box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue