392 lines
17 KiB
TypeScript
392 lines
17 KiB
TypeScript
import { Link, useNavigate } from 'react-router-dom'
|
|
import { useState, useEffect, useRef } from 'react'
|
|
import { API_BASE, type Category, type StoreSettings } from '../types'
|
|
import { ShoppingBag, Menu as MenuIcon, X, Heart, Globe, Check } from 'lucide-react'
|
|
import { useCartStore } from '../store/cartStore'
|
|
import { useWishlistStore } from '../store/wishlistStore'
|
|
import { useAuthStore } from '../store/authStore'
|
|
import { logoutLiff, loginLiff } from '../lib/liff'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useMediaQuery } from '../hooks/useMediaQuery'
|
|
import { DesktopMegaMenu } from './DesktopMegaMenu'
|
|
import { MobileDrawer } from './MobileDrawer'
|
|
import { useMenuStore } from '../store/menuStore'
|
|
|
|
interface NavbarProps {
|
|
categories?: Category[]
|
|
topOffsetClassName?: string
|
|
isTransparent?: boolean
|
|
}
|
|
|
|
export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = false }: NavbarProps) {
|
|
const isDesktop = useMediaQuery('(min-width: 768px)')
|
|
|
|
const [searchOpen, setSearchOpen] = useState(false)
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const [langSheetOpen, setLangSheetOpen] = useState(false)
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const [hasAnnouncement, setHasAnnouncement] = useState(false)
|
|
const [settings, setSettings] = useState<StoreSettings | null>(null)
|
|
const navigate = useNavigate()
|
|
|
|
const { toggleCart, getCartCount } = useCartStore()
|
|
const cartCount = getCartCount()
|
|
const wishlistCount = useWishlistStore(state => state.items.length)
|
|
const { customer } = useAuthStore()
|
|
const { t, i18n } = useTranslation()
|
|
|
|
const { megaMenu, fetchMegaMenu } = useMenuStore()
|
|
const navRef = useRef<HTMLElement>(null)
|
|
|
|
const LANGUAGES = [
|
|
{ code: 'th', label: 'ไทย', short: 'TH' },
|
|
{ code: 'en', label: 'English', short: 'EN' },
|
|
{ code: 'ja', label: '日本語', short: 'JP' },
|
|
{ code: 'zh', label: '简体中文', short: 'ZH' },
|
|
{ code: 'vi', label: 'Tiếng Việt', short: 'VN' },
|
|
{ code: 'ko', label: '한국어', short: 'KO' },
|
|
]
|
|
|
|
const changeLanguage = (code: string) => {
|
|
i18n.changeLanguage(code)
|
|
localStorage.setItem('app_lang', code)
|
|
setLangSheetOpen(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchMegaMenu()
|
|
|
|
const checkAnnouncement = () => {
|
|
const el = document.querySelector('.announcement-bar')
|
|
setHasAnnouncement(!!el)
|
|
}
|
|
checkAnnouncement()
|
|
const timer = setTimeout(checkAnnouncement, 300)
|
|
|
|
const onScroll = () => {
|
|
setScrolled(window.scrollY > 20)
|
|
checkAnnouncement()
|
|
}
|
|
window.addEventListener('scroll', onScroll, { passive: true })
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', onScroll)
|
|
clearTimeout(timer)
|
|
}
|
|
}, [fetchMegaMenu])
|
|
|
|
useEffect(() => {
|
|
fetch(`${API_BASE}/settings`)
|
|
.then((response) => (response.ok ? response.json() : null))
|
|
.then((data: StoreSettings | null) => {
|
|
if (data) setSettings(data)
|
|
})
|
|
.catch((error) => console.error('Failed to fetch store settings', error))
|
|
}, [])
|
|
|
|
// Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
|
|
useEffect(() => {
|
|
let animationFrameId: number;
|
|
const navElement = navRef.current;
|
|
|
|
const updateNavBottom = () => {
|
|
if (navElement) {
|
|
const bottom = navElement.getBoundingClientRect().bottom
|
|
document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
|
|
}
|
|
}
|
|
|
|
updateNavBottom()
|
|
|
|
window.addEventListener('scroll', updateNavBottom, { passive: true })
|
|
window.addEventListener('resize', updateNavBottom)
|
|
|
|
const observer = new ResizeObserver(() => {
|
|
cancelAnimationFrame(animationFrameId);
|
|
animationFrameId = requestAnimationFrame(updateNavBottom);
|
|
});
|
|
|
|
if (navElement) {
|
|
observer.observe(navElement);
|
|
navElement.addEventListener('transitionend', updateNavBottom);
|
|
}
|
|
observer.observe(document.body);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', updateNavBottom)
|
|
window.removeEventListener('resize', updateNavBottom)
|
|
observer.disconnect()
|
|
if (navElement) {
|
|
navElement.removeEventListener('transitionend', updateNavBottom);
|
|
}
|
|
cancelAnimationFrame(animationFrameId);
|
|
}
|
|
}, [topOffsetClassName])
|
|
|
|
useEffect(() => {
|
|
document.body.style.overflow = (searchOpen || mobileOpen || langSheetOpen) ? 'hidden' : ''
|
|
return () => { document.body.style.overflow = '' }
|
|
}, [searchOpen, mobileOpen, langSheetOpen])
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (searchQuery.trim()) {
|
|
navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
|
|
setSearchOpen(false)
|
|
setMobileOpen(false)
|
|
setSearchQuery('')
|
|
}
|
|
}
|
|
|
|
const computedOffset = topOffsetClassName !== 'top-0'
|
|
? topOffsetClassName
|
|
: (hasAnnouncement ? 'top-[32px] md:top-[40px]' : 'top-0')
|
|
|
|
const finalTopClassName = scrolled ? 'top-0' : computedOffset
|
|
const brandName = settings?.brandName || ''
|
|
|
|
const logoUrl = settings?.logoUrl || ''
|
|
|
|
const shouldBeTransparent = isTransparent && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
|
|
|
|
return (
|
|
<>
|
|
<nav
|
|
ref={navRef}
|
|
className={`fixed ${finalTopClassName} z-50 w-full transition-all duration-300 ${
|
|
scrolled
|
|
? 'border-b border-pop-black/10 shadow-lg shadow-pop-black/10 backdrop-blur-xl bg-pop-bg/90'
|
|
: shouldBeTransparent
|
|
? 'border-transparent shadow-none bg-transparent backdrop-blur-none'
|
|
: 'border-b border-pop-black/10 shadow-none bg-pop-bg'
|
|
} px-4 py-3.5 md:px-6 md:py-4`}
|
|
>
|
|
{/* Single-row layout: Logo (left) | Menu (center, desktop) | Actions (right) */}
|
|
<div className="w-full flex items-center justify-between gap-4">
|
|
|
|
{/* Left: Logo */}
|
|
<div className="flex items-center shrink-0">
|
|
<Link to="/" onClick={() => setMobileOpen(false)} className="text-xl font-bold italic tracking-widest text-pop-black uppercase shrink-0 md:text-2xl">
|
|
{logoUrl ? <img src={logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Center: Desktop mega menu */}
|
|
{isDesktop && (
|
|
<div className="flex-1 flex justify-center">
|
|
<DesktopMegaMenu items={megaMenu} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Right: Actions */}
|
|
<div className="flex items-center gap-1.5 md:gap-2 shrink-0">
|
|
{/* Search — desktop & mobile */}
|
|
<button
|
|
onClick={() => { setSearchOpen(true); setMobileOpen(false); }}
|
|
className="group rounded-full p-1.5 text-pop-black/80 transition-all hover:bg-pop-black/5 md:p-2"
|
|
aria-label="Search"
|
|
>
|
|
<svg className="w-4 h-4 group-hover:text-pop-black transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<Link
|
|
to="/wishlist"
|
|
onClick={() => setMobileOpen(false)}
|
|
className="group relative rounded-full p-1.5 text-pop-black/80 transition-all hover:bg-pop-black/5 md:p-2"
|
|
aria-label="Wishlist"
|
|
>
|
|
<Heart className="w-4 h-4 group-hover:text-rose-500 transition-colors" />
|
|
{wishlistCount > 0 && (
|
|
<span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
|
|
{wishlistCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
<button
|
|
onClick={() => { toggleCart(true); setMobileOpen(false); }}
|
|
className="group relative rounded-full p-1.5 text-pop-black/80 transition-all hover:bg-pop-black/5 md:p-2"
|
|
aria-label="Cart"
|
|
>
|
|
<ShoppingBag className="w-4 h-4 group-hover:text-pop-black transition-colors" />
|
|
{cartCount > 0 && (
|
|
<span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
|
|
{cartCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{isDesktop && (
|
|
<>
|
|
<div className="relative group flex items-center">
|
|
<button className="px-3 py-2 rounded-full text-[10px] font-bold transition-all text-pop-black border border-pop-black/20 hover:bg-pop-black/5 bg-pop-bg flex items-center gap-1.5 uppercase tracking-wider">
|
|
<Globe className="w-3.5 h-3.5" strokeWidth={1.5} />
|
|
{LANGUAGES.find(l => i18n.language.startsWith(l.code))?.short || 'TH'}
|
|
</button>
|
|
<div className="absolute top-full right-0 pt-2 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
|
|
<div className="bg-pop-bg/95 backdrop-blur-xl border border-pop-black/10 rounded-xl overflow-hidden shadow-2xl p-1.5 space-y-0.5">
|
|
{LANGUAGES.map(lang => {
|
|
const isActive = i18n.language.startsWith(lang.code)
|
|
return (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => changeLanguage(lang.code)}
|
|
className={`w-full flex items-center justify-between px-3 py-2.5 text-xs rounded-lg transition-colors font-medium ${isActive ? 'text-pop-black bg-pop-black/10 font-bold' : 'text-pop-black/70 hover:bg-pop-black/5 hover:text-pop-black'}`}
|
|
>
|
|
<span>{lang.label}</span>
|
|
{isActive && <Check className="w-3.5 h-3.5" />}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{customer ? (
|
|
<div className="relative group flex items-center ml-1">
|
|
<Link to="/profile">
|
|
<img
|
|
src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`}
|
|
alt="Profile"
|
|
className="w-9 h-9 rounded-full border-2 border-pop-black/20 cursor-pointer object-cover animate-fade-in"
|
|
/>
|
|
</Link>
|
|
<div className="absolute top-full right-0 pt-3 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
|
|
<div className="bg-pop-bg/95 backdrop-blur-xl border border-pop-black/10 rounded-xl overflow-hidden shadow-xl p-1">
|
|
<div className="px-3 py-2 border-b border-pop-black/10 mb-1">
|
|
<p className="text-[10px] text-pop-black/60 uppercase tracking-widest leading-tight truncate">{t('nav.signedInAs', 'Signed in as')}</p>
|
|
<p className="text-xs text-pop-black font-bold truncate">{customer.displayName}</p>
|
|
</div>
|
|
<Link
|
|
to="/profile"
|
|
className="block px-3 py-2 text-xs uppercase tracking-widest text-pop-black/70 hover:text-pop-black hover:bg-pop-black/5 rounded-lg transition-colors font-bold"
|
|
>
|
|
My Profile
|
|
</Link>
|
|
<button
|
|
onClick={logoutLiff}
|
|
className="w-full text-left px-3 py-2 text-xs uppercase tracking-widest text-rose-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors font-bold"
|
|
>
|
|
{t('nav.logout', 'Logout')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={loginLiff}
|
|
className="ml-2 px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest bg-[#00B900] text-white hover:bg-[#009900] transition-all duration-300 shadow-sm"
|
|
>
|
|
{t('nav.login', 'LINE Login')}
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{!isDesktop && (
|
|
<button
|
|
onClick={() => setMobileOpen(prev => !prev)}
|
|
className="p-1.5 rounded-full text-pop-black/80 hover:bg-pop-black/5 transition-all"
|
|
aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
|
|
>
|
|
{mobileOpen ? <X className="w-5 h-5" /> : <MenuIcon className="w-5 h-5" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{!isDesktop && (
|
|
<MobileDrawer
|
|
isOpen={mobileOpen}
|
|
onClose={() => setMobileOpen(false)}
|
|
items={megaMenu}
|
|
onOpenLang={() => setLangSheetOpen(true)}
|
|
/>
|
|
)}
|
|
|
|
{searchOpen && (
|
|
<div
|
|
className="fixed inset-0 z-[100] bg-pop-bg/95 backdrop-blur-xl flex flex-col items-center pt-24 md:pt-32 px-4 md:px-6"
|
|
onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
|
|
>
|
|
<div className="w-full max-w-2xl space-y-6 animate-fade-in">
|
|
<div className="flex justify-between items-center">
|
|
<p className="text-pop-black/70 text-xs uppercase tracking-widest font-semibold">{t('nav.search.title')}</p>
|
|
<button onClick={() => setSearchOpen(false)} className="p-2 rounded-full hover:bg-pop-black/5 transition-all text-pop-black/80">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSearch}>
|
|
<div className="flex bg-pop-bg border-2 border-pop-black/20 focus-within:border-pop-black rounded-2xl overflow-hidden transition-colors shadow-sm">
|
|
<svg className="w-5 h-5 text-pop-black/50 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="ค้นหากลิ่น, หมวดหมู่..."
|
|
className="bg-transparent border-none outline-none text-lg md:text-xl p-4 pl-0 w-full text-pop-black placeholder-pop-black/40"
|
|
autoFocus
|
|
/>
|
|
<button type="submit" className="bg-pop-black text-pop-bg px-4 md:px-6 font-bold text-xs uppercase tracking-widest shrink-0 hover:bg-pop-black/80 transition-colors">
|
|
Go
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`fixed inset-0 z-[110] md:hidden transition-all duration-300 ${langSheetOpen ? 'visible' : 'invisible'}`}
|
|
>
|
|
<div
|
|
className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
|
|
onClick={() => setLangSheetOpen(false)}
|
|
/>
|
|
<div
|
|
className={`absolute bottom-0 left-0 right-0 bg-pop-bg rounded-t-3xl transition-transform duration-300 shadow-2xl pb-safe ${langSheetOpen ? 'translate-y-0' : 'translate-y-full'}`}
|
|
>
|
|
<div className="flex justify-center pt-3 pb-1">
|
|
<div className="w-12 h-1.5 bg-pop-black/20 rounded-full" />
|
|
</div>
|
|
<div className="px-6 pb-6 pt-2">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-sm font-bold uppercase tracking-widest text-pop-black flex items-center gap-2">
|
|
<Globe className="w-4 h-4" />
|
|
Select Language
|
|
</h3>
|
|
<button onClick={() => setLangSheetOpen(false)} className="p-2 rounded-full hover:bg-pop-black/5 text-pop-black/80">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-1">
|
|
{LANGUAGES.map(lang => {
|
|
const isActive = i18n.language.startsWith(lang.code)
|
|
return (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => changeLanguage(lang.code)}
|
|
className={`w-full flex items-center justify-between px-4 py-4 rounded-xl transition-colors font-medium border border-transparent ${isActive ? 'bg-pop-black/10 border-pop-black/20 text-pop-black font-bold' : 'bg-pop-bg/50 text-pop-black/80 hover:bg-pop-black/5'}`}
|
|
>
|
|
<span className="text-base">{lang.label}</span>
|
|
{isActive && <Check className="w-5 h-5" />}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|