90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
|
|
|
|
type HeaderProps = {
|
|
username?: string;
|
|
};
|
|
|
|
export const Header: React.FC<HeaderProps> = ({ username }) => {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
const toggleMenu = () => setMenuOpen(!menuOpen);
|
|
|
|
return (
|
|
<header className="w-full bg-white shadow-md sticky top-0 left-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 items-center">
|
|
|
|
{/* Левый блок — логотип / название */}
|
|
<div className="flex-shrink-0">
|
|
<Link to="/" className="text-xl font-bold text-gray-800 hover:text-blue-600">
|
|
NyanimeDB
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Центр — ссылки на разделы (desktop) */}
|
|
<nav className="hidden md:flex space-x-4">
|
|
<Link to="/titles" className="text-gray-700 hover:text-blue-600">
|
|
Titles
|
|
</Link>
|
|
<Link to="/users" className="text-gray-700 hover:text-blue-600">
|
|
Users
|
|
</Link>
|
|
<Link to="/about" className="text-gray-700 hover:text-blue-600">
|
|
About
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Правый блок — профиль */}
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
{username ? (
|
|
<Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium">
|
|
{username}
|
|
</Link>
|
|
) : (
|
|
<Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium">
|
|
Login
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
{/* Бургер для мобильного */}
|
|
<div className="md:hidden flex items-center">
|
|
<button
|
|
onClick={toggleMenu}
|
|
className="p-2 rounded-md hover:bg-gray-200 transition"
|
|
>
|
|
{menuOpen ? (
|
|
<XMarkIcon className="w-6 h-6 text-gray-800" />
|
|
) : (
|
|
<Bars3Icon className="w-6 h-6 text-gray-800" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Мобильное меню */}
|
|
{menuOpen && (
|
|
<div className="md:hidden bg-white border-t border-gray-200 shadow-md">
|
|
<nav className="flex flex-col p-4 space-y-2">
|
|
<Link to="/titles" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Titles</Link>
|
|
<Link to="/users" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Users</Link>
|
|
<Link to="/about" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>About</Link>
|
|
{username ? (
|
|
<Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
|
|
{username}
|
|
</Link>
|
|
) : (
|
|
<Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
|
|
Login
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|