76 lines
4.0 KiB
TypeScript
76 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { Link, usePathname, useRouter } from '@/i18n/routing'
|
|
import { useTranslations, useLocale } from 'next-intl'
|
|
import { useState } from 'react'
|
|
|
|
export function Header() {
|
|
const t = useTranslations('nav')
|
|
const locale = useLocale()
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
const toggleLanguage = () => {
|
|
const nextLang = locale === 'tr' ? 'en' : 'tr'
|
|
router.replace(pathname, { locale: nextLang })
|
|
}
|
|
|
|
return (
|
|
<header className="bg-surface/90 backdrop-blur-md w-full top-0 sticky z-50 border-b border-outline-variant/30 shadow-sm">
|
|
<nav className="flex justify-between items-center w-full px-[var(--spacing-gutter)] py-4 max-w-[var(--spacing-container-max)] mx-auto">
|
|
<Link href="/" className="font-headline-md text-headline-md text-on-surface tracking-tighter hover:text-tertiary transition-colors">
|
|
Teras
|
|
</Link>
|
|
|
|
<div className="hidden md:flex items-center gap-8">
|
|
<Link href="/" className={`font-label-caps text-label-caps uppercase ${pathname === '/' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
|
|
{t('home')}
|
|
</Link>
|
|
<Link href="/menu" className={`font-label-caps text-label-caps uppercase ${pathname === '/menu' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
|
|
{t('menu')}
|
|
</Link>
|
|
<Link href="/galeri" className={`font-label-caps text-label-caps uppercase ${pathname === '/galeri' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
|
|
{t('gallery')}
|
|
</Link>
|
|
<button onClick={toggleLanguage} className="font-label-caps text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase">
|
|
{locale}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/rezervasyon" className="bg-secondary-container text-on-secondary-container px-6 py-2 font-label-caps text-label-caps uppercase tracking-widest hover:scale-95 transition-all duration-200 hidden md:inline-block">
|
|
{t('reservation')}
|
|
</Link>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="md:hidden flex items-center gap-4">
|
|
<button onClick={toggleLanguage} className="font-label-caps text-label-caps text-on-surface-variant uppercase">
|
|
{locale}
|
|
</button>
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="text-on-surface-variant hover:text-secondary"
|
|
>
|
|
<span className="material-symbols-outlined">{isOpen ? 'close' : 'menu'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu */}
|
|
{isOpen && (
|
|
<div className="md:hidden bg-surface border-b border-outline-variant/30">
|
|
<div className="px-4 pt-2 pb-4 space-y-2 flex flex-col">
|
|
<Link href="/" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('home')}</Link>
|
|
<Link href="/menu" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('menu')}</Link>
|
|
<Link href="/galeri" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('gallery')}</Link>
|
|
<Link href="/rezervasyon" onClick={() => setIsOpen(false)} className="bg-secondary-container text-on-secondary-container px-6 py-2 font-label-caps text-label-caps uppercase tracking-widest text-center mt-2">{t('reservation')}</Link>
|
|
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|