253 lines
9.9 KiB
TypeScript
253 lines
9.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { Link, usePathname, useRouter } from '@/i18n/routing'
|
|
import { useTranslations, useLocale } from 'next-intl'
|
|
import { Menu, X, Globe, PlusCircle, Heart } from 'lucide-react'
|
|
import { Category } from '@prisma/client'
|
|
|
|
export default function Navbar({ categories = [] }: { categories?: Category[] }) {
|
|
const t = useTranslations('nav')
|
|
const activeLocale = useLocale()
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
const [langMenuOpen, setLangMenuOpen] = useState(false)
|
|
const [favoritesCount, setFavoritesCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const updateCount = () => {
|
|
try {
|
|
const stored = localStorage.getItem('savedListingIds')
|
|
if (stored) {
|
|
const ids = JSON.parse(stored) as string[]
|
|
setFavoritesCount(ids.length)
|
|
} else {
|
|
setFavoritesCount(0)
|
|
}
|
|
} catch (e) {
|
|
console.error('Error reading localStorage:', e)
|
|
}
|
|
}
|
|
|
|
updateCount()
|
|
|
|
window.addEventListener('favorites-updated', updateCount)
|
|
window.addEventListener('storage', updateCount)
|
|
|
|
return () => {
|
|
window.removeEventListener('favorites-updated', updateCount)
|
|
window.removeEventListener('storage', updateCount)
|
|
}
|
|
}, [])
|
|
|
|
const languages = [
|
|
{ code: 'tr', label: 'Türkçe' },
|
|
{ code: 'en', label: 'English' },
|
|
{ code: 'ru', label: 'Русский' }
|
|
]
|
|
|
|
const getLocalizedName = (obj: any) => {
|
|
if (!obj) return ''
|
|
return activeLocale === 'ru' ? obj.nameRu : activeLocale === 'en' ? obj.nameEn : obj.nameTr
|
|
}
|
|
|
|
const categoryItems = categories.map(cat => ({
|
|
name: getLocalizedName(cat),
|
|
href: `/${cat.slug}`
|
|
}))
|
|
|
|
const navItems = [
|
|
...categoryItems,
|
|
{ name: t('events'), href: '/events' },
|
|
{ name: t('blog'), href: '/blog' },
|
|
]
|
|
|
|
const handleLanguageChange = (localeCode: string) => {
|
|
setLangMenuOpen(false)
|
|
router.replace(pathname, { locale: localeCode })
|
|
}
|
|
|
|
return (
|
|
<header className="bg-pine text-stone border-b border-white/10 sticky top-0 z-40">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-20">
|
|
|
|
{/* Logo & Wordmark */}
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<div className="w-11 h-11 rounded-full border-2 border-stone flex items-center justify-center relative bg-paper shrink-0 shadow-sm transition-transform group-hover:scale-105">
|
|
<div className="absolute inset-[3px] rounded-full border border-dashed border-turquoise" />
|
|
<span className="font-heading font-extrabold text-pine text-sm tracking-tighter">ML</span>
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<h1 className="font-heading font-extrabold text-lg text-stone tracking-tight leading-none lowercase">
|
|
marmaris <span className="text-turquoise">local</span>
|
|
</h1>
|
|
<p className="text-[9px] font-mono text-shutter tracking-wider mt-0.5 uppercase">
|
|
local knowledge
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden lg:flex items-center gap-8">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`text-sm font-medium transition-colors hover:text-turquoise ${isActive ? 'text-turquoise font-semibold' : 'text-stone/80'
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* Action Items */}
|
|
<div className="hidden lg:flex items-center gap-4">
|
|
{/* Saved items trigger */}
|
|
<Link
|
|
href="/saved"
|
|
className="relative w-8 h-8 rounded-full border border-stone/20 hover:border-turquoise transition text-stone hover:text-turquoise flex items-center justify-center"
|
|
title={t('saved')}
|
|
>
|
|
<Heart className="w-4 h-4" />
|
|
{favoritesCount > 0 && (
|
|
<span className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-bougainvillea text-stone text-[8px] font-mono font-bold flex items-center justify-center shadow-sm shrink-0">
|
|
{favoritesCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
{/* Language Selector */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setLangMenuOpen(!langMenuOpen)}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-stone/20 hover:border-turquoise transition text-xs font-mono"
|
|
>
|
|
<Globe className="w-3.5 h-3.5 text-turquoise" />
|
|
{activeLocale.toUpperCase()}
|
|
</button>
|
|
|
|
{langMenuOpen && (
|
|
<>
|
|
<div className="fixed inset-0 z-10" onClick={() => setLangMenuOpen(false)} />
|
|
<div className="absolute right-0 mt-2 w-36 rounded-xl bg-paper text-ink shadow-lg ring-1 ring-black/5 z-20 py-1.5 overflow-hidden">
|
|
{languages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => handleLanguageChange(lang.code)}
|
|
className={`w-full text-left px-4 py-2 text-xs hover:bg-stone transition flex items-center justify-between ${activeLocale === lang.code ? 'font-bold text-turquoise bg-stone/40' : 'text-ink/80'
|
|
}`}
|
|
>
|
|
{lang.label}
|
|
<span className="font-mono text-[10px] text-shutter">{lang.code.toUpperCase()}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Add Business Button */}
|
|
<Link
|
|
href="/add-business"
|
|
className="flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper font-medium text-xs py-2 px-4 rounded-full transition-transform active:scale-95 shadow-sm"
|
|
>
|
|
<PlusCircle className="w-3.5 h-3.5" />
|
|
{t('addBusiness')}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="flex items-center gap-3 lg:hidden">
|
|
{/* Mobile Saved trigger */}
|
|
<Link
|
|
href="/saved"
|
|
className="relative w-8 h-8 rounded-full border border-stone/20 text-stone flex items-center justify-center"
|
|
title={t('saved')}
|
|
>
|
|
<Heart className="w-4 h-4" />
|
|
{favoritesCount > 0 && (
|
|
<span className="absolute -top-1.5 -right-1.5 w-3.5 h-3.5 rounded-full bg-bougainvillea text-stone text-[8px] font-mono font-bold flex items-center justify-center shadow-sm shrink-0">
|
|
{favoritesCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
{/* Lang menu for mobile */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setLangMenuOpen(!langMenuOpen)}
|
|
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border border-stone/20 text-xs font-mono"
|
|
>
|
|
<Globe className="w-3.5 h-3.5 text-turquoise" />
|
|
{activeLocale.toUpperCase()}
|
|
</button>
|
|
{langMenuOpen && (
|
|
<>
|
|
<div className="fixed inset-0 z-10" onClick={() => setLangMenuOpen(false)} />
|
|
<div className="absolute right-0 mt-2 w-32 rounded-xl bg-paper text-ink shadow-lg ring-1 ring-black/5 z-20 py-1">
|
|
{languages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => handleLanguageChange(lang.code)}
|
|
className="w-full text-left px-3 py-1.5 text-xs hover:bg-stone"
|
|
>
|
|
{lang.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="text-stone hover:text-turquoise focus:outline-none"
|
|
>
|
|
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="lg:hidden border-t border-white/10 bg-pine py-4 px-4 space-y-3">
|
|
<nav className="flex flex-col gap-3">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className={`text-sm font-medium py-2 px-3 rounded-lg transition-colors ${isActive ? 'bg-white/10 text-turquoise' : 'text-stone/80 hover:bg-white/5'
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
<div className="pt-4 border-t border-white/10">
|
|
<Link
|
|
href="/add-business"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="w-full flex items-center justify-center gap-2 bg-turquoise hover:bg-turquoise/90 text-paper font-medium py-3 rounded-lg text-sm transition"
|
|
>
|
|
<PlusCircle className="w-4 h-4" />
|
|
{t('addBusiness')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|