+ navbar components

src/App.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';  // Use Routes and Navigate instead of Switch and Redirect
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import LoginPage from './pages/LoginPage/LoginPage';
@@ -21,9 +21,9 @@ const App = () => {
   return (
     <Router>
       <div className={styles.container}>
-        <Routes>  // Use Routes instead of Switch
-          <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />  // Use element and Navigate instead of component and Redirect
-          <Route path="/dashboard" element={user ? <DashboardPage /> : <Navigate to="/login" />} />
+        <Routes>
+          <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
+          <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
           <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
         </Routes>
         <ToastContainer />

src/components/navbar/Navbar.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { auth } from '../../pages/LoginPage/firebase';
+import styles from './Navbar.module.scss';
+
+const Navbar = ({ user }) => {
+    const handleLogout = () => {
+      auth.signOut();
+    };
+  
+    return (
+      <div className={styles.navbar}>
+        <div className={styles.userInfo}>
+          <img src={user.photoURL} alt="Profile" className={styles.profilePic} />
+          <div className={styles.userDetails}>
+            <span className={styles.userName}>{user.displayName}</span>
+            <button onClick={handleLogout} className={styles.logoutButton}>Logout</button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+  
+  export default Navbar;

src/components/navbar/Navbar.module.scss

@@ -0,0 +1,50 @@
+.navbar {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #333;
+    color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+  }
+  
+  .userInfo {
+    display: flex;
+    align-items: center;
+  }
+  
+  .profilePic {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  
+  .userDetails {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .userName {
+    font-weight: bold;
+  }
+  
+  .logoutButton {
+    margin-top: 5px;
+    padding: 5px 10px;
+    background-color: #ff4b4b;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .logoutButton:hover {
+    background-color: #ff1a1a;
+  }
+  

src/pages/DashboardPage/DashboardPage.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import ServerCard from '../../components/serverCard/serverCard';
+import Navbar from '../../components/navbar/Navbar';
 import styles from './DashboardPage.module.scss';
 
-const DashboardPage = () => {
+const DashboardPage = ({ user }) => {
   return (
-    <div className={styles.container}>
+    <div className={styles.dashboardContainer}>
+      <Navbar user={user} />
       <div className={styles.cardsContainer}>
         <ServerCard color="#f0f0f0" status="En cours" version="1.16.5" link="http://example.com" name="test1" />
         <ServerCard color="#f0f0f0" status="Démarrage" version="1.17.1" link="http://example.com" name="test2" />
@@ -14,4 +16,4 @@ const DashboardPage = () => {
   );
 };
 
-export default DashboardPage;
+export default DashboardPage;

src/pages/DashboardPage/DashboardPage.module.scss

@@ -21,4 +21,4 @@ body, html {
     align-items: center;
     justify-content: center;
   }
-  
+  

src/pages/LoginPage/LoginPage.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { auth, googleProvider, signInWithPopup } from './firebase'; // Import signInWithPopup
+import { auth, googleProvider, signInWithPopup } from './firebase'; 
 import { useNavigate } from 'react-router-dom';
 
 const LoginPage = () => {
@@ -7,7 +7,7 @@ const LoginPage = () => {
 
   const handleLogin = async () => {
     try {
-      await signInWithPopup(auth, googleProvider); // Use modular signInWithPopup
+      await signInWithPopup(auth, googleProvider); 
       navigate('/dashboard');
     } catch (error) {
       console.error("Erreur lors de la connexion : ", error);

src/pages/LoginPage/firebase.js

@@ -10,10 +10,8 @@ const firebaseConfig = {
   appId: "1:201267205657:web:f38e37d16f376d68b73c88"
 };
 
-// Initialize Firebase
 const app = initializeApp(firebaseConfig);
 
-// Initialize Firebase Authentication and get a reference to the service
 const auth = getAuth(app);
 const googleProvider = new GoogleAuthProvider();