$

src/components/NavBar/NavBar.jsx

@@ -0,0 +1,50 @@
+import { useAuth } from "../../hooks";
+import "./NavBar.scss";
+import { logout } from "../../api";
+import { Link } from "react-router-dom/";
+
+export default function NavBar() {
+    const { user } = useAuth();
+    console.log(user);
+
+    const onLogout = () => {
+        logout().then((res) => {
+            if (res === "Ok") {
+                window.location.reload();
+            }
+        });
+    };
+
+    return (
+        <nav id="nav-container">
+            <ul id="leafs-container">
+                <li className="leaf">
+                    <Link to="/">Accueil</Link>
+                </li>
+
+                <li className="leaf">
+                    <Link to="rooms">Pieces</Link>
+                </li>
+
+                {user ? (
+                    <div className="leaf-into">
+                        <li className="leaf">
+                            <Link to="profile">Profile</Link>
+                        </li>
+
+                        <button className="leaf-btn" onClick={onLogout}>
+                            Deconnexion
+                        </button>
+                    </div>
+                ) : (
+                    <li className="leaf-into">
+                        <span className="leaf-txt">
+                            <Link to="login">Connexion</Link>&nbsp;/&nbsp;
+                            <Link to="register">Inscription</Link>
+                        </span>
+                    </li>
+                )}
+            </ul>
+        </nav>
+    );
+}

src/components/NavBar/NavBar.scss

@@ -0,0 +1,41 @@
+#nav-container {
+    background: rgb(123, 106, 156);
+    padding: 15px;
+
+    a {
+        font-weight: bold;
+        color: white;
+        text-decoration: none;
+
+        &:hover {
+            border-bottom: 1.5px solid white;
+        }
+    }
+
+    #leafs-container {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        color: white;
+        gap: 50px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+
+        .leaf-into {
+            .leaf-btn {
+            }
+
+            .leaf {
+            }
+
+            .leaf-txt {
+            }
+        }
+
+        .leaf {
+            font-weight: bold;
+        }
+    }
+}

src/components/authenticated.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { AuthenticationProvider } from "../contexts";
+
+export const Authenticated = ({ children }) => {
+  return <AuthenticationProvider>{children}</AuthenticationProvider>;
+};

src/components/index.js

@@ -0,0 +1 @@
+export * from "./authenticated";