'use client' import { useState, useEffect } from 'react' import Link from 'next/link' import { motion, AnimatePresence } from 'framer-motion' import { usePathname, useRouter } from 'next/navigation' import Image from 'next/image' import { ArrowRight, ChevronDown, Menu, X, Plus } from 'lucide-react' export default function Navbar({ lang, dict }: { lang: string, dict: any }) { const router = useRouter() const pathname = usePathname() const [isVisible, setIsVisible] = useState(true) const [lastScrollY, setLastScrollY] = useState(0) const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const handleLangChange = (newLang: string) => { const segments = pathname.split('/') if (segments[1] === 'en' || segments[1] === 'tr') { segments[1] = newLang } else { segments.splice(1, 0, newLang) } router.push(segments.join('/')) } const navLinks = [ { name: dict.nav.about, href: `/${lang}/about` }, { name: dict.nav.suites, href: `/${lang}/suites`, hasDropdown: true }, { name: dict.nav.news, href: `/${lang}/news` }, ] useEffect(() => { const controlNavbar = () => { if (typeof window !== 'undefined') { const currentScrollY = window.scrollY if (currentScrollY > lastScrollY && currentScrollY > 100) { setIsVisible(false) } else { setIsVisible(true) } setLastScrollY(currentScrollY) setIsScrolled(currentScrollY > 50) } } window.addEventListener('scroll', controlNavbar) return () => window.removeEventListener('scroll', controlNavbar) }, [lastScrollY]) return ( <>
{/* LOGO */} AYRIS APART {/* DESKTOP NAV */}
{navLinks.map((link) => ( {link.name} ))}
{/* LANGUAGE SWITCHER */}
{dict.nav.contact}
{/* MOBILE MENU TOGGLE */}
{/* MOBILE MENU */} {isMobileMenuOpen && (
AYRIS
{navLinks.map((link, idx) => ( setIsMobileMenuOpen(false)} className="text-5xl font-serif text-[#1A1A1A] tracking-tighter"> {link.name} ))} setIsMobileMenuOpen(false)} className="text-5xl font-serif text-[#1A1A1A] tracking-tighter"> {dict.nav.contact} {/* Lang Toggle Mobile */}
)}
) }