100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Menu, X } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
export default function Header({ dict, lang, dbSettings }: { dict: any, lang: string, dbSettings?: any }) {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const navLinks = [
|
|
{ name: dict.nav.about, href: "#about" },
|
|
{ name: dict.nav.services, href: "#services" },
|
|
{ name: dict.nav.gallery, href: "#gallery" },
|
|
{ name: dict.nav.contact, href: "#contact" },
|
|
];
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 w-full z-50 transition-all duration-300 ${
|
|
isScrolled ? "bg-white/95 backdrop-blur-md shadow-sm py-4" : "bg-transparent py-6"
|
|
}`}
|
|
>
|
|
<div className="container mx-auto px-4 md:px-6 flex justify-between items-center">
|
|
<a href="#" className="flex items-center">
|
|
<Image
|
|
src={dbSettings?.logoUrl || "/logo.png"}
|
|
alt="Moy Beach Logo"
|
|
width={120}
|
|
height={48}
|
|
priority
|
|
className={`h-12 w-auto transition-all duration-300 ${!isScrolled ? "brightness-0 invert opacity-90" : ""}`}
|
|
style={{ width: "auto", height: "auto" }}
|
|
/>
|
|
</a>
|
|
|
|
{/* Desktop Nav */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
className={`text-sm tracking-wide hover:text-coral transition-colors ${
|
|
isScrolled ? "text-sea-dark" : "text-white"
|
|
}`}
|
|
>
|
|
{link.name}
|
|
</a>
|
|
))}
|
|
<div className={`flex items-center gap-2 text-sm font-medium ${isScrolled ? "text-sea-dark" : "text-white"}`}>
|
|
<a href="/tr" className={`cursor-pointer hover:text-coral ${lang === 'tr' ? 'opacity-100 font-bold' : 'opacity-70'}`}>TR</a>
|
|
<span className="opacity-50">/</span>
|
|
<a href="/en" className={`cursor-pointer hover:text-coral ${lang === 'en' ? 'opacity-100 font-bold' : 'opacity-70'}`}>EN</a>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className="md:hidden"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? (
|
|
<X className={isScrolled ? "text-sea-dark" : "text-white"} />
|
|
) : (
|
|
<Menu className={isScrolled ? "text-sea-dark" : "text-white"} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Nav */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden absolute top-full left-0 w-full bg-white shadow-xl flex flex-col py-4 px-6 space-y-4">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
className="text-sea-dark text-lg py-2 border-b border-gray-100"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{link.name}
|
|
</a>
|
|
))}
|
|
<div className="flex gap-4 pt-2">
|
|
<a href="/tr" className={`font-medium cursor-pointer ${lang === 'tr' ? 'text-sea-dark font-bold' : 'text-gray-400'}`}>TR</a>
|
|
<a href="/en" className={`font-medium cursor-pointer ${lang === 'en' ? 'text-sea-dark font-bold' : 'text-gray-400'}`}>EN</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|