'use client'; import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { usePathname } from 'next/navigation'; import { useTranslations, useLocale } from 'next-intl'; import { useRouter } from 'next/navigation'; import { locales } from '@/config'; export default function Header() { const [isLanguageOpen, setIsLanguageOpen] = useState(false); const [isMoreOpen, setIsMoreOpen] = useState(false); const moreDropdownRef = useRef(null); const languageDropdownRef = useRef(null); const pathname = usePathname(); const t = useTranslations('Navigation'); const tLang = useTranslations('LanguageSwitcher'); const tCommon = useTranslations('Common'); const locale = useLocale(); const router = useRouter(); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (moreDropdownRef.current && !moreDropdownRef.current.contains(event.target as Node)) { setIsMoreOpen(false); } }; if (isMoreOpen) { document.addEventListener('mousedown', handleClickOutside); } return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [isMoreOpen]); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (languageDropdownRef.current && !languageDropdownRef.current.contains(event.target as Node)) { setIsLanguageOpen(false); } }; if (isLanguageOpen) { document.addEventListener('mousedown', handleClickOutside); } return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [isLanguageOpen]); const handleLocaleChange = (newLocale: string) => { const newPath = `/${newLocale}${pathname.startsWith(`/${locale}`) ? pathname.substring(locale.length + 1) : pathname}`; router.replace(newPath); setIsLanguageOpen(false); }; const handleContactClick = (e: React.MouseEvent) => { e.preventDefault(); const footer = document.getElementById('footer-section'); if (footer) { footer.scrollIntoView({ behavior: 'smooth' }); } }; const navItems = [ { key: 'home', path: '/' }, { key: 'about', path: '/about' }, { key: 'location', path: '/location' }, { key: 'team', path: '/team' }, { key: 'investors', path: '/investors' }, { key: 'media', path: '/media' }, { key: 'contact', path: '#footer-section' }, ]; const moreItems = [ { key: 'characteristics', path: '/characteristics' }, { key: 'villas_layout', path: '/villas-layout' }, { key: 'safety_resilience', path: '/safety-resilience' }, { key: 'environmental_sustainability', path: '/environmental-sustainability' }, { key: 'reasons_to_invest', path: '/reasons-to-invest' }, ]; const getLocalizedPath = (path: string) => { if (path === '/') { return `/${locale}`; } return `/${locale}${path}`; } const isActive = (path: string) => { const localizedPath = getLocalizedPath(path); if (path === '/') { return pathname === `/${locale}` || pathname === `/${locale}/` || pathname === '/'; } return pathname === localizedPath || pathname.startsWith(localizedPath + '/'); } return (
{/* Left: Logo */}
LAKE Resort Residence
{/* Center: Navigation */} {/* Right: Language Switcher */}
{isLanguageOpen && (
{locales.map((lng: string) => ( ))}
)}
); }