labguage and colormode support

src/components/Navigation.jsx

@@ -9,21 +9,52 @@ import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react";
 import DownloadIcon from "../assets/icons/navIcons/download.svg?react";
 import { NavLink } from "react-router-dom";
 import clsx from "clsx";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";
 
 const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   const [animation, setAnimation] = useState(initialAnimation);
 
+  const { colormode } = useTheme();
+
   const navItems = [
-    { name: "Home", to: "/", icon: HouseIcon, id: 1 },
-    { name: "About", to: "/about", icon: AddressCardIcon, id: 2 },
-    { name: "Experience", to: "/workExp", icon: SuitcaseIcon, id: 3 },
-    { name: "Projects", to: "/projects", icon: CodeIcon, id: 4 },
-    { name: "Contact", to: "/contact", icon: EnvelopeIcon, id: 5 },
-    { name: "CV", to: "", icon: DownloadIcon, id: 6 },
+    { name: { enGB: "Home", deDE: "Start" }, to: "/", icon: HouseIcon, id: 1 },
+    {
+      name: { enGB: "About", deDE: "Über Mich" },
+      to: "/about",
+      icon: AddressCardIcon,
+      id: 2,
+    },
+    {
+      name: { enGB: "Experience", deDE: "Erfahrung" },
+      to: "/workExp",
+      icon: SuitcaseIcon,
+      id: 3,
+    },
+    {
+      name: { enGB: "Projects", deDE: "Projekte" },
+      to: "/projects",
+      icon: CodeIcon,
+      id: 4,
+    },
+    {
+      name: { enGB: "Contact", deDE: "Kontakt" },
+      to: "/contact",
+      icon: EnvelopeIcon,
+      id: 5,
+    },
+    {
+      name: { enGB: "CV", deDE: "Lebenslauf" },
+      to: "",
+      icon: DownloadIcon,
+      id: 6,
+    },
   ];
+
+  const { language } = useLang();
   return (
     <div
-      className={`navigation container animate__animated ${animation}`}
+      className={`navigation container animate__animated ${animation} ${colormode}`}
       /* onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
@@ -38,11 +69,14 @@ const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
                   clsx(
                     "navLink",
                     { active: isActive },
-                    item.name === "CV" && "cv" // Add "cv" class if item.name is "CV"
+                    item.name.enGB === "CV" && "cv" // Add "cv" class if item.name is "CV"
                   )
                 }
               >
-                <span>{item.name}</span> <IconComponent className="navIcon" />
+                <span>
+                  {language === "en-GB" ? item.name.enGB : item.name.deDE}
+                </span>{" "}
+                <IconComponent className="navIcon" />
               </NavLink>
             </li>
           );