From 4501f38b03d3fbc06cb4ee6e0963cf762b7bee77 Mon Sep 17 00:00:00 2001
From: Lukian LEIZOUR <lulul7018@gmail.com>
Date: Fri, 18 Apr 2025 21:02:40 +0200
Subject: [PATCH] fix: added logout button back to phone version

---
 front/src/components/TopBar.tsx | 12 ++++++++++--
 front/src/styles/TopBar.css     |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/front/src/components/TopBar.tsx b/front/src/components/TopBar.tsx
index 48bf827..4eda32b 100644
--- a/front/src/components/TopBar.tsx
+++ b/front/src/components/TopBar.tsx
@@ -45,9 +45,17 @@ export default function TopBar({ user }: { user: User | undefined }) {
                         <Link to="/channels">Channels</Link>
                         <Link to="/users">Users</Link>
                         {user ? (
-                            <Link to={`/u/${user.username}`}>{user.username}</Link>
+                            <div className="burger-menu-user">
+                                <Link to={`/u/${user.username}`}>{user.username}</Link>
+                                <button onClick={() => {
+                                    localStorage.removeItem("token")
+                                    window.location.reload()
+                                }}>
+                                    Logout
+                                </button>
+                            </div>
                         ) : (
-                            <div>
+                            <div className="burger-menu-user">
                                 <Link to="/login">Login</Link>
                                 <Link to="/register">Register</Link>
                             </div>
diff --git a/front/src/styles/TopBar.css b/front/src/styles/TopBar.css
index 218c4c0..a8fa641 100644
--- a/front/src/styles/TopBar.css
+++ b/front/src/styles/TopBar.css
@@ -39,6 +39,13 @@
     gap: 10px;
 }
 
+.burger-menu-user {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
 @media (max-width: 630px) {
     .topbar {
         flex-direction: column;