Implemented english, hindi and bangla language integration through i18next

src/components/MenuBar.jsx

@@ -1,15 +1,17 @@
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const SubMenu = ({ items }) => {
+  const {t} = useTranslation();
   return (
     <div className="
       hidden  absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
        dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
     >
       {items.map((subItem, index) => (
-        <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl last:rounded-b-2xl first:pt-4 last:pb-4">
-          <Link to={subItem.path}>{subItem.name}</Link>
+        <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
+          <Link to={subItem.path}>{t(subItem.name)}</Link>
         </div>
       ))}
       <svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13"  xmlns="http://www.w3.org/2000/svg">
@@ -20,11 +22,12 @@ const SubMenu = ({ items }) => {
 };
 
 function MenuBar({ menuItems }) {
+  const {t} = useTranslation();
   return (
     <div className="flex justify-between text-base pt-5 pb-2 font-body">
       {menuItems.map((item, index) =>
         <div key={index} className="group relative pb-3 cursor-pointer">
-          {item.name}
+          {t(item.name)}
           {item.submenu.length > 0 && <SubMenu items={item.submenu} />}
         </div>
       )}