87 lines
5.3 KiB
TypeScript
87 lines
5.3 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { Menu, X, LayoutDashboard, User as UserIcon } from 'lucide-react';
|
|
import { User } from '../types';
|
|
|
|
interface NavbarProps {
|
|
user: User | null;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
const Navbar: React.FC<NavbarProps> = ({ user, onLogout }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const location = useLocation();
|
|
|
|
// Hide Navbar on Dashboard to prevent double navigation, show only on public pages
|
|
if (location.pathname.startsWith('/dashboard')) return null;
|
|
|
|
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">
|
|
<div className="flex items-center">
|
|
<Link to="/" className="flex-shrink-0 flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold font-serif">A</div>
|
|
<span className="font-serif font-bold text-xl text-gray-900">Afropreunariat</span>
|
|
</Link>
|
|
<div className="hidden sm:ml-8 sm:flex sm:space-x-8">
|
|
<Link to="/" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname === '/' ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
|
|
Accueil
|
|
</Link>
|
|
<Link to="/directory" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname.startsWith('/directory') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
|
|
Annuaire
|
|
</Link>
|
|
<Link to="/afrolife" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname.startsWith('/afrolife') ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
|
|
Afro Life
|
|
</Link>
|
|
<Link to="/blog" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname.startsWith('/blog') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
|
|
Blog
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
|
|
{user ? (
|
|
<>
|
|
<Link to="/dashboard" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none">
|
|
<LayoutDashboard className="w-4 h-4 mr-2" />
|
|
Mon Espace
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<Link to="/login" className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
|
|
<UserIcon className="w-4 h-4 mr-2" />
|
|
Connexion / Inscription
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="-mr-2 flex items-center sm:hidden">
|
|
<button onClick={() => setIsOpen(!isOpen)} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
|
|
{isOpen ? <X className="block h-6 w-6" /> : <Menu className="block h-6 w-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{isOpen && (
|
|
<div className="sm:hidden bg-white border-t">
|
|
<div className="pt-2 pb-3 space-y-1">
|
|
<Link to="/" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Accueil</Link>
|
|
<Link to="/directory" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Annuaire</Link>
|
|
<Link to="/afrolife" className="block pl-3 pr-4 py-2 border-l-4 border-brand-500 text-base font-medium text-brand-700 bg-brand-50" onClick={() => setIsOpen(false)}>Afro Life</Link>
|
|
<Link to="/blog" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Blog</Link>
|
|
{user ? (
|
|
<Link to="/dashboard" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Mon Espace</Link>
|
|
) : (
|
|
<Link to="/login" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Connexion</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|