mirror of
http://88.130.71.182:3000/BlitTech/deals24togo_fe.git
synced 2026-06-12 23:33:21 +00:00
315 lines
13 KiB
TypeScript
315 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
|
import { Menu, X, ChevronDown, UserCircle, Search, MessageCircle } from 'lucide-react';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { useI18n } from '../../contexts/I18nContext';
|
|
import { api } from '../../services/api';
|
|
import Button from './Button';
|
|
|
|
const Navbar: React.FC = () => {
|
|
const { user, logout, isRole } = useAuth();
|
|
const { lang, setLang, t } = useI18n();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [isProfileOpen, setIsProfileOpen] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [unreadCount, setUnreadCount] = useState(0);
|
|
|
|
// Poll unread message count for agency users
|
|
useEffect(() => {
|
|
if (!user || user.role !== 'agency') return;
|
|
const fetchUnread = () => {
|
|
api.messages.unreadCount()
|
|
.then((data: any) => setUnreadCount(data.count ?? data.unread_count ?? 0))
|
|
.catch(() => {});
|
|
};
|
|
fetchUnread();
|
|
const interval = setInterval(fetchUnread, 60000); // refresh every minute
|
|
return () => clearInterval(interval);
|
|
}, [user]);
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (searchQuery.trim()) {
|
|
navigate(`/listings?search=${encodeURIComponent(searchQuery.trim())}`);
|
|
setSearchQuery('');
|
|
setIsMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
const isActive = (path: string) => location.pathname === path;
|
|
|
|
const navLinkClasses = 'px-3 py-2 text-primary-700 hover:text-accent-600 font-medium transition-colors';
|
|
const navLinkActiveClasses = 'text-accent-700 border-b-2 border-accent-600';
|
|
|
|
const LangToggle = () => (
|
|
<button
|
|
onClick={() => setLang(lang === 'en' ? 'fr' : 'en')}
|
|
className="px-2 py-1 text-xs font-semibold rounded border border-primary-300 text-primary-700 hover:bg-primary-50 transition-colors"
|
|
title="Switch language"
|
|
>
|
|
{lang === 'en' ? 'FR' : 'EN'}
|
|
</button>
|
|
);
|
|
|
|
return (
|
|
<nav className="bg-white shadow-sm sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
{/* Logo and desktop navigation */}
|
|
<div className="flex">
|
|
<div className="flex-shrink-0 flex items-center">
|
|
<Link to="/" className="text-2xl font-bold text-primary-800">
|
|
Deals24Togo
|
|
</Link>
|
|
</div>
|
|
<div className="hidden sm:ml-6 sm:flex sm:items-center">
|
|
<div className="flex space-x-4">
|
|
<Link
|
|
to="/"
|
|
className={`${navLinkClasses} ${isActive('/') ? navLinkActiveClasses : ''}`}
|
|
>
|
|
{t.nav.home}
|
|
</Link>
|
|
<Link
|
|
to="/listings"
|
|
className={`${navLinkClasses} ${isActive('/listings') ? navLinkActiveClasses : ''}`}
|
|
>
|
|
{t.nav.listings}
|
|
</Link>
|
|
<Link
|
|
to="/categories"
|
|
className={`${navLinkClasses} ${isActive('/categories') ? navLinkActiveClasses : ''}`}
|
|
>
|
|
{t.nav.categories}
|
|
</Link>
|
|
{user && (
|
|
<Link
|
|
to="/favorites"
|
|
className={`${navLinkClasses} ${isActive('/favorites') ? navLinkActiveClasses : ''}`}
|
|
>
|
|
{t.nav.favorites}
|
|
</Link>
|
|
)}
|
|
{isRole('agency') && (
|
|
<Link
|
|
to="/agency/dashboard"
|
|
className={`${navLinkClasses} ${isActive('/agency/dashboard') ? navLinkActiveClasses : ''} relative inline-flex items-center`}
|
|
>
|
|
{t.nav.myDashboard}
|
|
{unreadCount > 0 && (
|
|
<span className="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold rounded-full bg-error-500 text-white leading-none">
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
{isRole('admin') && (
|
|
<Link
|
|
to="/admin/dashboard"
|
|
className={`${navLinkClasses} ${isActive('/admin/dashboard') ? navLinkActiveClasses : ''}`}
|
|
>
|
|
{t.nav.adminDashboard}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop right section */}
|
|
<div className="hidden sm:flex sm:items-center space-x-3">
|
|
<form onSubmit={handleSearch} className="relative">
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder={t.nav.searchPlaceholder}
|
|
className="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 w-56"
|
|
/>
|
|
<button type="submit" className="absolute left-3 top-2.5 p-0 bg-transparent border-0">
|
|
<Search className="h-5 w-5 text-gray-400" />
|
|
</button>
|
|
</form>
|
|
|
|
<LangToggle />
|
|
|
|
{user ? (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsProfileOpen(p => !p)}
|
|
className="flex items-center bg-gray-100 rounded-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500"
|
|
>
|
|
<UserCircle className="h-6 w-6 text-primary-700" />
|
|
<span className="ml-2 font-medium hidden md:block">{user.name}</span>
|
|
<ChevronDown className="ml-1 h-4 w-4 text-primary-600" />
|
|
</button>
|
|
{isProfileOpen && (
|
|
<div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 z-10 animate-fade-in">
|
|
<div className="px-4 py-2 text-xs text-gray-500">
|
|
{user.email}
|
|
</div>
|
|
<div className="border-t border-gray-200" />
|
|
<Link
|
|
to="/profile"
|
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setIsProfileOpen(false)}
|
|
>
|
|
{t.nav.myProfile}
|
|
</Link>
|
|
{isRole('agency') && (
|
|
<Link
|
|
to="/agency/dashboard"
|
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setIsProfileOpen(false)}
|
|
>
|
|
{t.nav.agencyProfile}
|
|
</Link>
|
|
)}
|
|
<button
|
|
onClick={handleLogout}
|
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
{t.nav.signOut}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center space-x-2">
|
|
<Link to="/login">
|
|
<Button variant="outline" size="sm">{t.nav.signIn}</Button>
|
|
</Link>
|
|
<Link to="/register">
|
|
<Button size="sm">{t.nav.register}</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="flex items-center sm:hidden space-x-2">
|
|
<LangToggle />
|
|
<button
|
|
onClick={() => setIsMenuOpen(o => !o)}
|
|
className="p-2 rounded-md text-primary-600 hover:text-primary-800 focus:outline-none"
|
|
>
|
|
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{isMenuOpen && (
|
|
<div className="sm:hidden bg-white border-t border-gray-200 animate-fade-in">
|
|
<div className="px-4 pt-3 pb-2">
|
|
<form onSubmit={handleSearch} className="relative">
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder={t.nav.searchPlaceholder}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500"
|
|
/>
|
|
<button type="submit" className="absolute left-3 top-2.5 p-0 bg-transparent border-0">
|
|
<Search className="h-5 w-5 text-gray-400" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div className="px-2 pt-1 pb-3 space-y-1">
|
|
{[
|
|
{ to: '/', label: t.nav.home },
|
|
{ to: '/listings', label: t.nav.listings },
|
|
{ to: '/categories', label: t.nav.categories },
|
|
].map(({ to, label }) => (
|
|
<Link
|
|
key={to}
|
|
to={to}
|
|
className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
{isRole('agency') && (
|
|
<Link
|
|
to="/agency/dashboard"
|
|
className="flex items-center px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{t.nav.myDashboard}
|
|
{unreadCount > 0 && (
|
|
<span className="ml-2 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold rounded-full bg-error-500 text-white leading-none">
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
{isRole('admin') && (
|
|
<Link
|
|
to="/admin/dashboard"
|
|
className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{t.nav.adminDashboard}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="pt-4 pb-3 border-t border-gray-200">
|
|
{user ? (
|
|
<>
|
|
<div className="flex items-center px-4">
|
|
<UserCircle className="h-10 w-10 text-primary-600" />
|
|
<div className="ml-3">
|
|
<div className="text-base font-medium text-primary-800">{user.name}</div>
|
|
<div className="text-sm font-medium text-primary-500">{user.email}</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 px-2 space-y-1">
|
|
<Link
|
|
to="/profile"
|
|
className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{t.nav.myProfile}
|
|
</Link>
|
|
<Link
|
|
to="/favorites"
|
|
className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{t.nav.favorites}
|
|
</Link>
|
|
<button
|
|
onClick={() => { handleLogout(); setIsMenuOpen(false); }}
|
|
className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
|
|
>
|
|
{t.nav.signOut}
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="px-4 flex flex-col space-y-2">
|
|
<Link to="/login" onClick={() => setIsMenuOpen(false)}>
|
|
<Button variant="outline" fullWidth>{t.nav.signIn}</Button>
|
|
</Link>
|
|
<Link to="/register" onClick={() => setIsMenuOpen(false)}>
|
|
<Button fullWidth>{t.nav.register}</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|