nihonium/nyanimedb
1
0
Fork 1
Code Issues 12 Pull requests Releases Packages 3 Activity Actions

feat: settings button in drop menu in header
All checks were successful
Build (frontend build only) / build (push) Successful in 2m37s
Details

Browse source
This commit is contained in:
Iron_Felix 2025-12-20 02:21:07 +03:00
parent 95dee88bc6
commit 2a47e64386
1 changed files with 39 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

47
modules/frontend/src/components/Header/Header.tsx
View file

@ -32,6 +32,8 @@ export const Header: React.FC = () => {
localStorage.removeItem("user_id"); localStorage.removeItem("user_id");
localStorage.removeItem("user_name"); localStorage.removeItem("user_name");
setUsername(null); setUsername(null);
setDropdownOpen(false);
setMenuOpen(false);
navigate("/login"); navigate("/login");
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -74,14 +76,38 @@ export const Header: React.FC = () => {
<div className="relative"> <div className="relative">
<button <button
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
className="text-gray-700 hover:text-blue-600 font-medium" className="text-gray-700 hover:text-blue-600 font-medium flex items-center gap-1"
> >
{username} {username}
<span className="text-[10px]">▼</span>
</button> </button>
{dropdownOpen && ( {dropdownOpen && (
<div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow-md z-50"> <div className="absolute right-0 mt-2 w-48 bg-white border rounded shadow-lg z-50 py-1">
<Link to="/profile" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setDropdownOpen(false)}>Profile</Link> <Link
<button onClick={handleLogout} className="w-full text-left px-4 py-2 hover:bg-gray-100">Logout</button> to="/profile"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
onClick={() => setDropdownOpen(false)}
>
Profile
</Link>
{/* КНОПКА SETTINGS */}
<Link
to="/settings"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
onClick={() => setDropdownOpen(false)}
>
Settings
</Link>
<div className="border-t border-gray-100 my-1"></div>
<button
onClick={handleLogout}
className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
>
Logout
</button>
</div> </div>
)} )}
</div> </div>
@ -107,11 +133,16 @@ export const Header: React.FC = () => {
<Link to="/titles" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Titles</Link> <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="/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> <Link to="/about" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>About</Link>
{username ? ( {username ? (
<> <div className="pt-2 mt-2 border-t border-gray-100 space-y-2">
<Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Profile</Link> <Link to="/profile" className="block text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Profile</Link>
<button onClick={handleLogout} className="text-gray-700 hover:text-blue-600 font-medium text-left">Logout</button>
</> {/* SETTINGS (Mobile) */}
<Link to="/settings" className="block text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Settings</Link>
<button onClick={handleLogout} className="block w-full text-left text-red-600 font-medium">Logout</button>
</div>
) : ( ) : (
<Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Login</Link> <Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Login</Link>
)} )}