i10n using NextIntl

components/languageSwitcher.tsx

@@ -0,0 +1,24 @@
+import { useRouter } from 'next/router';
+import { useTranslations } from 'next-intl';
+
+// using https://next-intl-docs.vercel.app/docs/getting-started/pages-router
+const LanguageSwitcher = () => {
+    const t = useTranslations('common');
+    const router = useRouter();
+    const { locale, locales, asPath } = router;
+
+    return (
+        <div>
+            {locales.map((lng) => {
+                if (lng === locale) return null;
+                return (
+                    <button key={lng} onClick={() => router.push(asPath, asPath, { locale: lng })}>
+                        {t('changeTo')} {t(lng.toUpperCase())}
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export default LanguageSwitcher;

components/layout.tsx

@@ -68,4 +68,5 @@ export default function Layout({ children }) {
       </div>
     </div>
   );
-}
+}
+

components/sidebar.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import sidemenu, { footerMenu } from './sidemenuData.js'; // Move sidemenu data to a separate file
 import axiosInstance from "src/axiosSecure";
 import common from "src/helpers/common";
+import LanguageSwitcher from "./languageSwitcher";
 //get package version from package.json
 const packageVersion = require('../package.json').version;
 
@@ -145,6 +146,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
             <div className="mt-auto">
               <hr className="border-gray-200 dark:border-gray-600 text-align-bottom" />
               <FooterSection />
+              <LanguageSwitcher />
             </div>
           </nav>
         </div>