97 lines
5.0 KiB
TypeScript
97 lines
5.0 KiB
TypeScript
'use client';
|
|
|
|
import { Link, usePathname, useRouter } from '@/i18n/routing';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { siteInfo } from '@/lib/data';
|
|
import { Phone, Menu, Globe } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
export function Navbar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const locale = useLocale();
|
|
const t = useTranslations('nav');
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const toggleLocale = () => {
|
|
const nextLocale = locale === 'tr' ? 'en' : 'tr';
|
|
router.replace(pathname, { locale: nextLocale });
|
|
};
|
|
|
|
return (
|
|
<div className="fixed top-2 md:top-4 left-2 right-2 md:left-4 md:right-4 z-50">
|
|
<header className="container mx-auto bg-white/90 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl transition-all duration-300">
|
|
<div className="px-4 md:px-6 h-16 md:h-20 flex items-center justify-between">
|
|
<Link href="/" className="font-extrabold text-lg md:text-xl lg:text-2xl text-deepblue-900 tracking-tighter flex items-center gap-2 hover:opacity-80 transition-opacity shrink-0">
|
|
{siteInfo.name}
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<nav className="hidden lg:flex items-center gap-4 xl:gap-6">
|
|
<Link href="/" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('home')}</Link>
|
|
<Link href="/hakkimizda" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('about')}</Link>
|
|
<Link href="/turlar" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('tours')}</Link>
|
|
<Link href="/aktiviteler" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('activities')}</Link>
|
|
<Link href="/tekne-turlari" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('boatTours')}</Link>
|
|
<Link href="/iletisim" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('contact')}</Link>
|
|
</nav>
|
|
|
|
<div className="hidden md:flex items-center gap-3 lg:gap-4 shrink-0">
|
|
{/* Language Switcher */}
|
|
<button
|
|
onClick={toggleLocale}
|
|
className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-gray-100 text-sm font-bold text-deepblue-900 transition-colors"
|
|
>
|
|
<Globe className="w-4 h-4 text-turquoise-500" />
|
|
{locale === 'tr' ? 'EN' : 'TR'}
|
|
</button>
|
|
|
|
<a href={siteInfo.phoneLink} className="hidden xl:flex items-center gap-2 text-sm font-semibold text-deepblue-900">
|
|
<Phone className="w-4 h-4 text-turquoise-500" />
|
|
{siteInfo.phone}
|
|
</a>
|
|
<a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="px-3 lg:px-4 py-2 bg-vibrantorange-500 hover:bg-orange-600 text-white rounded-md text-sm font-medium transition-colors">
|
|
{t('reservation')}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Toggle */}
|
|
<div className="flex items-center gap-2 lg:hidden">
|
|
<button
|
|
onClick={toggleLocale}
|
|
className="flex items-center justify-center w-8 h-8 rounded-md hover:bg-gray-100 text-sm font-bold text-deepblue-900 transition-colors"
|
|
>
|
|
{locale === 'tr' ? 'EN' : 'TR'}
|
|
</button>
|
|
<button className="p-2" onClick={() => setIsOpen(!isOpen)}>
|
|
<Menu className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Nav */}
|
|
{isOpen && (
|
|
<div className="lg:hidden border-t p-4 flex flex-col gap-4 bg-sandwhite-100 rounded-b-2xl">
|
|
<Link href="/" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('home')}</Link>
|
|
<Link href="/hakkimizda" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('about')}</Link>
|
|
<Link href="/turlar" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('tours')}</Link>
|
|
<Link href="/aktiviteler" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('activities')}</Link>
|
|
<Link href="/tekne-turlari" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('boatTours')}</Link>
|
|
<Link href="/iletisim" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('contact')}</Link>
|
|
|
|
<div className="pt-4 border-t flex flex-col gap-3">
|
|
<a href={siteInfo.phoneLink} className="flex items-center justify-center gap-2 text-sm font-semibold text-deepblue-900">
|
|
<Phone className="w-4 h-4 text-turquoise-500" />
|
|
{siteInfo.phone}
|
|
</a>
|
|
<a href={siteInfo.whatsappLink} className="block text-center px-4 py-3 bg-vibrantorange-500 text-white rounded-md text-sm font-medium">
|
|
{t('bookNow')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|