From 63914b5b3b5cc633fb08add624b989e7bed1046c Mon Sep 17 00:00:00 2001
From: Lukian LEIZOUR <lulul7018@gmail.com>
Date: Fri, 18 Apr 2025 18:02:23 +0200
Subject: [PATCH] fix: added a burger menu for phones versions

---
 front/src/components/TopBar.tsx | 24 ++++++++++++++++++++++++
 front/src/styles/TopBar.css     | 22 +++++++++++++++++++---
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/front/src/components/TopBar.tsx b/front/src/components/TopBar.tsx
index 6a1a4d7..48bf827 100644
--- a/front/src/components/TopBar.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/front/src/styles/TopBar.css b/front/src/styles/TopBar.css
index 0f0fe52..218c4c0 100644
--- a/front/src/styles/TopBar.css
+++ b/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;
-        align-items: center;
+        display: none;
     }
 
     .topbar-right {
+        display: none;
+    }
+
+    .burger-menu {
+        display: flex;
         flex-direction: column;
         align-items: center;
+        gap: 15px;
     }
 }