fix: added a burger menu for phones versions

front/src/components/TopBar.tsx

@@ -1,9 +1,12 @@
+import { useState } from "react"
 import { Link } from "react-router-dom"
 import { User } from "../types"
 
 import "../styles/TopBar.css"
 
 export default function TopBar({ user }: { user: User | undefined }) {
+    const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)
+
     return (
         <div className="topbar">
             <div className="topbar-left">
@@ -35,6 +38,27 @@ export default function TopBar({ user }: { user: User | undefined }) {
                     <Link to="/register">Register</Link>
                 </div>
             )}
+            <div className="burger-menu">
+                {burgerMenuOpen && (
+                    <div className="burger-menu-content">
+                        <Link to="/">Home</Link>
+                        <Link to="/channels">Channels</Link>
+                        <Link to="/users">Users</Link>
+                        {user ? (
+                            <Link to={`/u/${user.username}`}>{user.username}</Link>
+                        ) : (
+                            <div>
+                                <Link to="/login">Login</Link>
+                                <Link to="/register">Register</Link>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
+                    {burgerMenuOpen ? "Close" : "Menu"}
+                </button>
+            </div>
+            
         </div>
     )
 }

front/src/styles/TopBar.css

@@ -28,19 +28,35 @@
     border-radius: 50%;
 }
 
-@media (max-width: 560px) {
+.burger-menu {
+    display: none;
+}
+
+.burger-menu-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+@media (max-width: 630px) {
     .topbar {
         flex-direction: column;
         align-items: center;
     }
 
     .topbar-left {
-        flex-direction: column;
+        display: none;
-        align-items: center;
     }
 
     .topbar-right {
+        display: none;
+    }
+
+    .burger-menu {
+        display: flex;
         flex-direction: column;
         align-items: center;
+        gap: 15px;
     }
 }