Add logout btn

src/pages/Profile/ProfilePage.jsx

@@ -8,9 +8,13 @@ import { useNavigate } from "react-router";
 
 function ProfilePage() {
 
-    const { user } = useContext(AuthContext);
+    const { user, logout } = useContext(AuthContext);
     const navigate = useNavigate();
 
+    const handleLogout = () => {
+        logout();
+    }
+
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
@@ -23,7 +27,10 @@ function ProfilePage() {
             />
           </div>
           <div className={styles.description}>
-            <h2> {user.name} {user.lastname} </h2>
+            <div className={styles.headerProfile}>
+                <h2> {user.name} {user.lastname} </h2>
+                <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+            </div>
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
                 <p><strong>Role :</strong> {user.role}</p>

src/pages/Profile/ProfilePage.module.css

@@ -66,7 +66,7 @@
 }
 .description h2{
     font-size:30px;
-    margin-bottom: 2%;
+
 }
 .profilePicture{
     width:90%;
@@ -105,7 +105,6 @@
   }
   .description h2{
     font-size:30px;
-    margin-bottom: 2%;
 }
 .profilePicture{
     width:90%;
@@ -122,6 +121,14 @@
     width:50px;
 }
 
+.headerProfile {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
 /* Desktop (1024px et plus) */
 @media screen and (min-width: 1024px) {
   .container {
@@ -151,6 +158,5 @@
   }
   .description h2{
     font-size:30px;
-    margin-bottom: 2%;
 }
 }