Add multi-languages support with i18next

src/Pages/Home/Navbar.jsx

@@ -1,8 +1,10 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-scroll";
+import { useTranslation } from "react-i18next";
 
 function Navbar() {
   const [navActive, setNavActive] = useState(false);
+  const { t } = useTranslation();
 
   const toggleNav = () => {
     setNavActive(!navActive);
@@ -34,9 +36,19 @@ function Navbar() {
 
   return (
     <nav className={`navbar ${navActive ? "active" : ""}`}>
-      <div>
+      <Link
+        onClick={closeMenu}
+        activeClass="navbar--active-content"
+        spy={false}
+        smooth={true}
+        offset={-70}
+        duration={500}
+        to="heroSection"
+        className="navbar--logo"
+        style={{ cursor: 'pointer' }}
+      >
         <img src="./img/logo.png" alt="Logo" />
-      </div>
+      </Link>
       <a
         className={`nav__hamburger ${navActive ? "active" : ""}`}
         onClick={toggleNav}
@@ -58,7 +70,7 @@ function Navbar() {
               to="heroSection"
               className="navbar--content"
             >
-              Accueil
+              {t('navbar.home')}
             </Link>
           </li>
           <li>
@@ -72,7 +84,7 @@ function Navbar() {
               to="MyPortfolio"
               className="navbar--content"
             >
-              Portfolio
+              {t('navbar.portfolio')}
             </Link>
           </li>
           <li>
@@ -86,7 +98,7 @@ function Navbar() {
               to="AboutMe"
               className="navbar--content"
             >
-              À propos de moi
+              {t('navbar.about')}
             </Link>
           </li>
         </ul>
@@ -101,7 +113,7 @@ function Navbar() {
         to="Contact"
         className="btn btn-outline-primary"
       >
-        Contactez Moi
+        {t('navbar.contact')}
       </Link>
     </nav>
   );