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)]">