Added buttons for change language

src/assets/styles/components/_user-profile.scss

@@ -8,24 +8,39 @@
   right: -360px;
   background: #ffffff;
   /* Main Shadow 12% */
-  transition: .35s;
-  opacity: .25;
+  transition: 0.35s;
+  opacity: 0.25;
 
   box-shadow: 4px 4px 18px rgba(29, 29, 29, 0.12);
   border-radius: 18px;
-  animation: userView .35s !important;
+  animation: userView 0.35s !important;
 }
 
-.user-view.active{
+.change-language {
+  display: flex;
+}
+
+.change-language > * {
+  margin: 18px 4.5px 18px 4.5px !important;
+  width: 54px !important;
+  padding: 9px 36px !important;
+  gap: 9px !important;
+}
+
+.change-language-active-button {
+  background-color: $mainBlueLight !important;
+}
+
+.user-view.active {
   right: 1rem;
   opacity: 1;
 }
 
 @keyframes userView {
-    0%{
-        opacity: 0;
-    }
-    100%{
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }

src/components/Profile/UserProfile.js

@@ -7,9 +7,12 @@ import avatarLogo from "../../assets/images/Avatar.png";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 import { logoutUser } from "../../store/actions/login/loginActions";
+import IconButton from "../IconButton/IconButton";
+import en from "../../assets/images/en.png";
+import rs from "../../assets/images/rs.png";
 
 const UserProfile = ({ show, innerRef }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const dispatch = useDispatch();
   //   const theme = useTheme();
   //   const matches = useMediaQuery(theme.breakpoints.down("sm"));
@@ -19,6 +22,12 @@ const UserProfile = ({ show, innerRef }) => {
     dispatch(logoutUser());
   };
 
+  const changeLanguageHandler = () => {
+    i18n.language === "en"
+      ? i18n.changeLanguage("rs")
+      : i18n.changeLanguage("en");
+  };
+
   return (
     <Box className={`user-view flex-center ${show && "active"}`}>
       <div
@@ -41,6 +50,46 @@ const UserProfile = ({ show, innerRef }) => {
         >
           HR {t("common.specialist")}
         </Typography>
+        {/* <div>
+          <Button
+            type="button"
+            variant="contained"
+            className="c-btn c-btn--primary"
+            onClick={changeLanguageHandler}
+          >
+            Change Language
+          </Button>
+        </div> */}
+        <div className="change-language">
+          <IconButton
+            className={`c-btn--primary-outlined c-btn ${
+              i18n.language === "rs" && "change-language-active-button"
+            }`}
+            onClick={changeLanguageHandler}
+          >
+            <img
+              style={{
+                position: "relative",
+              }}
+              src={rs}
+            />
+            RS
+          </IconButton>
+          <IconButton
+            className={`c-btn--primary-outlined c-btn ${
+              i18n.language === "en" && "change-language-active-button"
+            }`}
+            onClick={changeLanguageHandler}
+          >
+            <img
+              style={{
+                position: "relative",
+              }}
+              src={en}
+            />
+            EN
+          </IconButton>
+        </div>
         {/* <div className="hr" style={{ width: "90%", marginTop: "18px" }}></div> */}
 
         <Button
@@ -50,7 +99,7 @@ const UserProfile = ({ show, innerRef }) => {
             borderRadius: "9px",
             background: "white",
             width: "90%",
-            marginTop: "50px",
+            // marginTop: "50px",
           }}
           onClick={logout}
           startIcon={<LogoutIcon />}