277 lines
12 KiB
Vue
277 lines
12 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file LandingHeader.vue
|
|
* @description คอมโพเนนต์แถบเมนูด้านบน (Header Navigation) สำหรับหน้า Landing Page และหน้าเปิดอื่นๆ
|
|
* รองรับการเปลี่ยนภาษา เปลี่ยนโหมดสว่าง/มืด และเข้าถึงเมนูผู้ใช้ (Profile/Logout)
|
|
*/
|
|
|
|
// ติดตามสถานะการเลื่อนเมาส์ (scroll) เพื่อปรับรูปแบบของ Header
|
|
const isScrolled = ref(false)
|
|
const { isAuthenticated } = useAuth()
|
|
// สถานะเมนูสำหรับหน้าจอมือถือ (Mobile Drawer State)
|
|
// ตัวแปรควบคุมการเปิด/ปิดเมนูบนหน้าจอขนาดเล็ก (Mobile Drawer)
|
|
const mobileMenuOpen = ref(false)
|
|
|
|
const handleScroll = () => {
|
|
isScrolled.value = window.scrollY > 20
|
|
}
|
|
|
|
// ปิดการเลื่อนหน้าเว็บ (Lock body scroll) เมื่อเปิดเมนูบนมือถือ
|
|
watch(mobileMenuOpen, (isOpen) => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleScroll)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
document.body.style.overflow = '' // คืนค่าเริ่มต้น (Cleanup)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!--
|
|
คอนเทนเนอร์ของ 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) -->
|
|
<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" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span
|
|
class="font-bold text-lg leading-none tracking-tight transition-colors"
|
|
:class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
|
|
>
|
|
EduLearn
|
|
</span>
|
|
<span
|
|
class="text-[10px] font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors"
|
|
:class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
|
|
>
|
|
Platform
|
|
</span>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
<!-- การนำทางสำหรับเดสก์ท็อป (แสดงผลเป็นค่าเริ่มต้น, ซ่อนบนมือถือผ่าน CSS 'desktop-nav') -->
|
|
<!-- <nav class="flex desktop-nav items-center gap-8 text-[16px] font-medium">
|
|
<NuxtLink
|
|
to="/browse"
|
|
class="transition-colors relative group py-2"
|
|
:class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
|
|
>
|
|
{{ $t('sidebar.onlineCourses') }}
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/browse/recommended"
|
|
class="transition-colors relative group py-2"
|
|
:class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
|
|
>
|
|
{{ $t('sidebar.recommendedCourses') }}
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
|
|
</NuxtLink>
|
|
</nav> -->
|
|
|
|
|
|
|
|
<!-- ปุ่มปฏิบัติการสำหรับเดสก์ท็อป (แสดงผลเป็นค่าเริ่มต้น, ซ่อนบนมือถือผ่าน CSS 'desktop-nav') -->
|
|
<div class="flex desktop-nav items-center gap-4">
|
|
<template v-if="!isAuthenticated">
|
|
<!-- ปุ่มเข้าสู่ระบบ (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"
|
|
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-white text-grey-9 bg-white hover:bg-blue-100 hover:border-blue-200']"
|
|
>
|
|
{{ $t('auth.login') }}
|
|
</NuxtLink>
|
|
|
|
<!-- ปุ่มสมัครสมาชิก (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"
|
|
>
|
|
{{ $t('auth.getStarted') }}
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<NuxtLink
|
|
to="/dashboard"
|
|
class="bg-blue-600 text-white font-semibold text-sm px-5 py-4 rounded-full hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
|
|
>
|
|
{{ $t('landing.goToDashboard') }}
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- ปุ่มเปิดเมนูบนมือถือ (แสดงผลเฉพาะบน 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]' : '']"
|
|
@click="mobileMenuOpen = !mobileMenuOpen"
|
|
>
|
|
<q-icon :name="mobileMenuOpen ? 'close' : 'menu'" size="24px" />
|
|
</button>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ลิ้นชักเมนูด้านข้างสำหรับมือถือ (Mobile Navigation Drawer - แยกส่วนไปยัง body เพื่อไม่ให้มีปัญหา z-index หรือถูกบัง) -->
|
|
<Teleport to="body">
|
|
<div v-if="mobileMenuOpen">
|
|
<div
|
|
class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[2000] transition-opacity duration-300 md:hidden"
|
|
:class="[mobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
|
|
@click="mobileMenuOpen = false"
|
|
/>
|
|
|
|
<div
|
|
class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-[2001] transform transition-transform duration-300 ease-out md:hidden flex flex-col"
|
|
: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) -->
|
|
<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"
|
|
>
|
|
<q-icon name="close" size="20px" />
|
|
</button>
|
|
|
|
<!-- ลิงก์สำหรับมือถือ (Mobile Links) -->
|
|
<nav class="flex flex-col gap-2 mt-8">
|
|
<NuxtLink
|
|
to="/"
|
|
class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
{{ $t('sidebar.overview') }}
|
|
<q-icon name="chevron_right" size="20px" class="text-slate-400" />
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/browse"
|
|
class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
{{ $t('sidebar.onlineCourses') }}
|
|
<q-icon name="chevron_right" size="20px" class="text-slate-400" />
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<div class="mt-auto pb-8 border-t border-slate-100 pt-8">
|
|
<template v-if="!isAuthenticated">
|
|
<div class="flex flex-col gap-4">
|
|
<NuxtLink
|
|
to="/auth/login"
|
|
class="w-full py-3 rounded-xl font-bold text-center border-2 border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
{{ $t('auth.login') }}
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/auth/register"
|
|
class="w-full py-3 rounded-xl font-bold text-center text-white bg-blue-600 shadow-lg hover:bg-blue-700 transition-colors"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
{{ $t('auth.getStarted') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink
|
|
to="/dashboard"
|
|
class="flex items-center justify-center w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg shadow-blue-500/30"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
{{ $t('landing.goToDashboard') }} <q-icon name="arrow_forward" class="ml-2" />
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* เอฟเฟกต์ Glassmorphism สำหรับ Header ตอนเลื่อนเมาส์ลง */
|
|
.glass-nav {
|
|
background: rgba(15, 23, 42, 0.95); /* พื้นหลังเข้มขึ้นเพื่อให้อ่านตัวหนังสือชัดเจน */
|
|
backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* สไตล์ปุ่มหลัก (Primary Button) แบบพรีเมียม */
|
|
.btn-primary-premium {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 800;
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-primary-premium:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
|
|
}
|
|
|
|
/* สไตล์ปุ่มดรอง (Secondary Button) แบบพรีเมียม */
|
|
.btn-secondary-premium {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 800;
|
|
border: 1.5px solid;
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-secondary-premium:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
โลจิกบังคับการแสดงผล เพื่อแก้ปัญหาการคอมไฟล์ของ Tailwind
|
|
ยืนยันว่าส่วน Desktop และ Mobile เลย์เอาต์แยกจากกันอย่างชัดเจน
|
|
*/
|
|
.desktop-nav {
|
|
display: flex; /* แสดงผลเป็นค่าเริ่มต้น */
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.desktop-nav {
|
|
display: none !important;
|
|
}
|
|
.mobile-toggle {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
</style>
|