streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
streaper2
2026-02-22 20:25:47 +01:00
commit a4f85b0b7b
31 changed files with 5870 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
components/Navbar.tsx Normal file
View File

@@ -0,0 +1,86 @@
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;