feat: /titles page with search and sort functionality. Website header added

modules/frontend/src/components/Header/Header.tsx

@@ -0,0 +1,90 @@
+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 fixed 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>
+  );
+};