From 137a9204df06ce589974395a6a77fde16d479f85 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Sat, 30 May 2026 11:19:52 +0200
Subject: [PATCH] added change translation button to sidebar and implemented
 translation functionality

---
 frontend/src/components/Sidebar.tsx        | 12 ++++++++
 frontend/src/utils/api/products.ts         |  0
 frontend/src/utils/i18n/locales/en/en.json |  3 +-
 frontend/src/utils/uxFncs.ts               | 32 ++++++++++------------
 4 files changed, 29 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/utils/api/products.ts

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 1c2e0aa..5e38351 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/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)]">
diff --git a/frontend/src/utils/api/products.ts b/frontend/src/utils/api/products.ts
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/utils/i18n/locales/en/en.json b/frontend/src/utils/i18n/locales/en/en.json
index cff8620..ae19320 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/frontend/src/utils/uxFncs.ts b/frontend/src/utils/uxFncs.ts
index c0d377b..7219465 100644
--- a/frontend/src/utils/uxFncs.ts
+++ b/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.");
+  }
+};