146 lines
5 KiB
TypeScript
146 lines
5 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { useState } from 'react';
|
|
import { useApp } from '../context/AppContext';
|
|
import { useAuth } from '../hooks/useAuth';
|
|
import { TaskboardLogo } from './TaskboardLogo';
|
|
import MenuIcon from './icons/MenuIcon';
|
|
import CloseIcon from './icons/CloseIcon';
|
|
|
|
export function Navbar() {
|
|
const { user } = useApp();
|
|
const { logout } = useAuth();
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="bg-gray-800 border-b border-gray-700 shadow-md">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="flex items-center">
|
|
<Link to="/boards" className="hover:opacity-80 transition-opacity flex-shrink-0">
|
|
<TaskboardLogo className="h-8 w-auto" />
|
|
</Link>
|
|
<Link
|
|
to="/boards"
|
|
className="text-xl font-bold text-white hover:text-blue-400 transition-colors ml-2"
|
|
>
|
|
Taskboard
|
|
</Link>
|
|
<div className="hidden md:flex items-baseline ml-10 space-x-4">
|
|
<Link
|
|
to="/home"
|
|
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Home
|
|
</Link>
|
|
|
|
{user && (
|
|
<Link
|
|
to="/boards"
|
|
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Boards
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="hidden md:flex items-center gap-3">
|
|
{user ? (
|
|
<>
|
|
<span className="text-gray-300 px-3 py-2">{user.username}</span>
|
|
<button
|
|
onClick={logout}
|
|
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Logout
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
to="/login"
|
|
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
to="/register"
|
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Register
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="md:hidden flex items-center">
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="text-gray-300 hover:text-white p-2 rounded-md"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{mobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden bg-gray-800 border-t border-gray-700">
|
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<Link
|
|
to="/home"
|
|
className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Home
|
|
</Link>
|
|
|
|
{user && (
|
|
<Link
|
|
to="/boards"
|
|
className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Boards
|
|
</Link>
|
|
)}
|
|
|
|
<div className="border-t border-gray-700 my-2"></div>
|
|
|
|
{user ? (
|
|
<>
|
|
<div className="px-3 py-2 text-gray-300 text-base font-medium">{user.username}</div>
|
|
<button
|
|
onClick={() => {
|
|
logout();
|
|
setMobileMenuOpen(false);
|
|
}}
|
|
className="text-gray-300 hover:text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium"
|
|
>
|
|
Logout
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
to="/login"
|
|
className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
to="/register"
|
|
className="bg-blue-600 hover:bg-blue-700 text-white block px-3 py-2 rounded-md text-base font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Register
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|