81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
export default function Navbar() {
|
|
const lang = "tr"; // Mocked locale
|
|
|
|
const navLinks = [
|
|
{ label: { tr: "KONAKLAMA", en: "ACCOMMODATION", de: "UNTERKUNFT" }, href: "/accommodation", side: "left" },
|
|
{ label: { tr: "YİYECEK & İÇECEK", en: "FOOD & BEVERAGE", de: "FOOD & BEVERAGE" }, href: "/dining", side: "left" },
|
|
{ label: { tr: "AKTİVİTE", en: "ACTIVITIES", de: "AKTIVITÄTEN" }, href: "/activities", side: "left" },
|
|
{ label: { tr: "ORGANİZASYON", en: "ORGANIZER", de: "ORGANISATION" }, href: "/organizations", side: "right" },
|
|
{ label: { tr: "GALERİ", en: "GALLERY", de: "GALERIE" }, href: "/gallery", side: "right" },
|
|
{ label: { tr: "SPA CENTER", en: "SPA CENTER", de: "SPA CENTER" }, href: "/spa", side: "right" },
|
|
];
|
|
|
|
return (
|
|
<nav className=" top-0 left-0 right-0 z-50 transition-all duration-500 py-6 bg-white shadow-sm border-b border-gray-50">
|
|
<div className="max-w-[1600px] mx-auto px-10 flex items-center justify-between">
|
|
|
|
{/* Left Menu */}
|
|
<div className="hidden lg:flex items-center space-x-12 flex-1">
|
|
{navLinks.filter(l => l.side === "left").map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="group relative text-[11px] font-medium tracking-[0.2em] transition-all text-gray-900 overflow-hidden"
|
|
>
|
|
<span className="relative z-10 block transition-transform duration-300 group-hover:-translate-y-full">
|
|
{link.label[lang as "tr"]}
|
|
</span>
|
|
<span className="absolute inset-0 z-20 block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-gold italic">
|
|
{link.label[lang as "tr"]}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Centered Logo */}
|
|
<div className="flex flex-col items-center">
|
|
<Link href="/" className="flex flex-col items-center group">
|
|
<span className="text-3xl md:text-5xl font-serif font-light tracking-[0.3em] text-gray-900 leading-none">
|
|
SALMAKIS
|
|
</span>
|
|
<span className="text-[10px] tracking-[0.6em] mt-2 text-gray-400 font-sans uppercase">
|
|
Resort & Spa
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Right Menu */}
|
|
<div className="hidden lg:flex items-center justify-end space-x-12 flex-1">
|
|
{navLinks.filter(l => l.side === "right").map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="group relative text-[11px] font-medium tracking-[0.2em] transition-all text-gray-900 overflow-hidden"
|
|
>
|
|
<span className="relative z-10 block transition-transform duration-300 group-hover:-translate-y-full">
|
|
{link.label[lang as "tr"]}
|
|
</span>
|
|
<span className="absolute inset-0 z-20 block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-gold italic">
|
|
{link.label[lang as "tr"]}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="lg:hidden">
|
|
<button className="p-2 text-gray-900">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="w-8 h-8">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|