update AppRouter.js, src/views/Home/Navbar/Mobile/index.js and src/views/Home/Navbar/Mobile/index.scss

src/AppRouter.js

@@ -91,7 +91,11 @@ class AppRouter extends Component {
     );
 
     return (
-      <div className={`flex-1 ${this.props.config?.direction}`}>
+      <div
+        className={`flex-1 ${
+          localStorage.getItem("language") === "en" ? "ltr" : "rtl"
+        }`}
+      >
         <Router>
           <Switch>
             {home}

src/views/Home/Navbar/Mobile/index.js

@@ -23,6 +23,17 @@ function BackButton({ children }) {
   );
 }
 
+const changeLanguage = (val) => {
+  if (val === "fa") {
+    localStorage.removeItem("language");
+  } else if (val === "en") {
+    localStorage.setItem("language", "en");
+  } else {
+    localStorage.setItem("language", "ar");
+  }
+  window.location.reload();
+};
+
 const useStyles = makeStyles({
   list: {
     width: window.innerWidth * 0.8,
@@ -89,6 +100,15 @@ export default function MobileNavbar(props) {
           </Link>
         </div>
         <div className="mobile-navbar__left d-flex" style={{ marginLeft: 10 }}>
+          <select
+            className="language-select"
+            onChange={(e) => changeLanguage(e.target.value)}
+            defaultValue={localStorage.getItem("language") || "fa"}
+          >
+            {["fa", "en", "ar"].map((lang, index) => (
+              <option key={index}>{lang}</option>
+            ))}
+          </select>
           <Link
             style={{ fontSize: 12 }}
             to={"/auth"}
@@ -129,6 +149,15 @@ export default function MobileNavbar(props) {
       </div>
 
       <div className="mobile-navbar__left">
+        <select
+          className="language-select"
+          onChange={(e) => changeLanguage(e.target.value)}
+          defaultValue={localStorage.getItem("language") || "fa"}
+        >
+          {["fa", "en", "ar"].map((lang, index) => (
+            <option key={index}>{lang}</option>
+          ))}
+        </select>
         {page === "home" || page === "download" ? (
           <Link to={"/products"}>
             <img src={search} alt={window.t("جستجو")} />

src/views/Home/Navbar/Mobile/index.scss

@@ -10,6 +10,19 @@
   padding: 0px 10px 0px;
   height: 50px;
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+
+  .language-select {
+    border: none;
+    outline: none;
+    width: 45px;
+    background-color: #6cbe44;
+    color: white;
+    font-weight: 500;
+    margin: 0px 10px;
+    border-radius: 5px;
+    padding: 0px 4px;
+  }
+
   &__signup {
     font-family: numeralLight;
     text-decoration: none;