From 2a47e643867081d668e37fe6e7667beae7493d8d Mon Sep 17 00:00:00 2001
From: Iron_Felix <trubnikov.arseniy@mail.ru>
Date: Sat, 20 Dec 2025 02:21:07 +0300
Subject: [PATCH] feat: settings button in drop menu in header

---
 .../frontend/src/components/Header/Header.tsx | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/modules/frontend/src/components/Header/Header.tsx b/modules/frontend/src/components/Header/Header.tsx
index 36cbd5a..9c3b39a 100644
--- a/modules/frontend/src/components/Header/Header.tsx
+++ b/modules/frontend/src/components/Header/Header.tsx
@@ -32,6 +32,8 @@ export const Header: React.FC = () => {
       localStorage.removeItem("user_id");
       localStorage.removeItem("user_name");
       setUsername(null);
+      setDropdownOpen(false);
+      setMenuOpen(false);
       navigate("/login");
     } catch (err) {
       console.error(err);
@@ -74,14 +76,38 @@ export const Header: React.FC = () => {
               <div className="relative">
                 <button
                   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}
+                  <span className="text-[10px]">▼</span>
                 </button>
                 {dropdownOpen && (
-                  <div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow-md z-50">
-                    <Link to="/profile" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setDropdownOpen(false)}>Profile</Link>
-                    <button onClick={handleLogout} className="w-full text-left px-4 py-2 hover:bg-gray-100">Logout</button>
+                  <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 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>
@@ -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="/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)}>Profile</Link>
-                <button onClick={handleLogout} className="text-gray-700 hover:text-blue-600 font-medium text-left">Logout</button>
-              </>
+              <div className="pt-2 mt-2 border-t border-gray-100 space-y-2">
+                <Link to="/profile" className="block text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Profile</Link>
+                
+                {/* 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>
             )}