mobile menu language change option updated

components/MobileMenu/MobileMenu.js

@@ -4,12 +4,14 @@ import ListItem from "@mui/material/List";
 import Collapse from "@mui/material/Collapse";
 import Link from "next/link";
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { changeLanguage } from '../../utils/commonFunction.utils';
 
 
 
 
 const MobileMenu = () => {
-
+    const router = useRouter()
     const { t } = useTranslation('menu'); // namespace: "menu.json"
     const [openId, setOpenId] = useState(0);
     const [menuActive, setMenuState] = useState(false);
@@ -18,6 +20,12 @@ const MobileMenu = () => {
         window.scrollTo(10, 0);
     };
 
+
+    const handleLanguageChange = (e) => {
+        const selectedLocale = e.target.value;
+        changeLanguage(router, selectedLocale);
+    };
+
     const menus = [
         {
             id: 1,
@@ -70,6 +78,13 @@ const MobileMenu = () => {
                     <div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></div>
                 </div>
 
+                <div className="language m-2" >
+                    <select onChange={handleLanguageChange} value={router.locale} style={{ width: "100%", height: "40px" }}>
+                        <option value="es">Spanish</option>
+                        <option value="en">English</option>
+                    </select>
+                </div>
+
                 <ul className="responsivemenu">
                     {menus.map((item, mn) => {
                         return (