added change translation button to sidebar and implemented translation functionality

frontend/src/components/Sidebar.tsx

@@ -5,8 +5,10 @@ import AddBoxIcon from "@mui/icons-material/AddBox";
 import StorageIcon from "@mui/icons-material/Storage";
 import SettingsIcon from "@mui/icons-material/Settings";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import TranslateIcon from "@mui/icons-material/Translate";
 import { useNavigate, useMatchRoute } from "@tanstack/react-router";
 import Cookies from "js-cookie";
+import { changeTranslation } from "../utils/uxFncs";
 
 export const Sidebar = () => {
   const { t } = useTranslation();
@@ -80,6 +82,16 @@ export const Sidebar = () => {
         >
           {t("logout")}
         </Button>
+        <Button
+          onClick={() => {
+            changeTranslation;
+          }}
+          color="neutral"
+          startDecorator={<TranslateIcon />}
+          className={btnClass}
+        >
+          {t("change-translation")}
+        </Button>
       </div>
 
       <div className="flex items-center gap-3 rounded-2xl border border-white/70 bg-white/80 px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-[#0b6bcb] shadow-[0_12px_30px_rgba(12,38,78,0.12)]">

frontend/src/utils/i18n/locales/en/en.json

@@ -41,5 +41,6 @@
     "preferences": "Preferences",
     "selected": "selected",
     "logout": "Logout",
-    "pcs": "pcs."
+    "pcs": "pcs.",
+    "change-translation": "Deutsch"
 }

frontend/src/utils/uxFncs.ts

@@ -6,25 +6,9 @@ import type {
   SettingsIntf,
   Storage,
 } from "../misc/interfaces";
+import i18n from "./i18n";
 
-export const getProducts = async () => {
-  const result = await fetch(`${API_BASE}/products/all-products`, {
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-  const response = await result.json();
 
-  if (response.code === "ep002") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "sp002") {
-    return response.data;
-  }
-};
 
 export const getProductDetails = async (uuid: string) => {
   const result = await fetch(`${API_BASE}/products/view?uuid=${uuid}`, {
@@ -289,3 +273,17 @@ export const deleteSelectedProducts = async (uuids: string[]) => {
 
   console.log(response);
 };
+
+export const changeTranslation = () => {
+  const clientLng = i18n.language;
+
+  if (clientLng === "en") {
+    i18n.changeLanguage("de");
+    Cookies.set("language", "de");
+  } else if (clientLng === "de") {
+    i18n.changeLanguage("en");
+    Cookies.set("language", "en");
+  } else {
+    alert("Cannot change language.");
+  }
+};