Considering that there will be users from multiple different countries, you might need to add the support for multiple languages.To help you with that, we have made the sidebar compatible with the multiple language functionality.

You can find the dropdown that changes the language in the header.

How does multi-language functionality works?

We have used the package react-i18next, you can install it by running the following command in the terminal.

npm i i18next react-i18next

react-i18next package configuration and implementation in the project:

After you finished installing react-i18next package in your project, follow the below given steps to add the multi-language support.

1. To enable translation for a new language, you need to create a JSON file following this path: 'src/app/i18n/locales'. Create a folder for the language, such as 'ae' for Arabic. Inside this folder, create a file named 'common.json'. Now add corresponding translated word for the arabic words.

   Refer the below folder structure

   src> app> i18n> locales> ae> common.json

   //common.json 
   {
       "General": "جنرال لواء",
       "Dashboard": "لوحة القيادة",
       "Default": "إفتراضي",
       "Ecommerce": "التجارة الإلكترونية",
       "OnlineCource":"دورة على شبكة الإنترنت",
       "Crypto":"تشفير",
       "Social":"اجتماعي",
       "Chart": "مخطط"
   }
   

   
   

2. Now add object having an exact keys used in below languageData.

   1. languageParameter : stands for language locale.

   2. languageName : stands for your language name.

   3. languageIconClassName : represents the national flag of the nation where this language originated.

   
   

   path : src/Data/Layout/Header/LanguageData.ts

                           
     export const LanguagesData = [
     {
       icon: "en",
       logo: "flag-icon flag-icon-us",
       title: "English",
     },
     {
       icon: "es",
       logo: "flag-icon flag-icon-is",
       title: "Spanish",
     },
     {
       icon: "pt",
       logo: "flag-icon flag-icon-uy",
       title: "Portuegse",
     },
     {
       icon: "fr",
       logo: "flag-icon flag-icon-nz",
       title: "French",
     },
     {
       icon: "ae",
       logo: "flag-icon flag-icon-ae",
       title: "لعربية",
     },
     {
       icon: "du",
       logo: "flag-icon flag-icon-de",
       title: "Deutsch",
     },
     {
       icon: "cn",
       logo: "flag-icon flag-icon-cn",
       title: "简体中文",
     },
   ];
                   
                     

3. If you have to change the default langauge or have to add new langauge in your application,you will need to follow some steps.
   first of all open the setting.ts file. // src/app/i18n/settings.ts

   1. fallbackLng is your application's default language. if you have change the default language replace value of fallbackLng with your desire langauge locale. for example: replace "en" with "ae" if you need to switch the default language from English to Arabic.

   2. languages is a term that describes the number of languages that your application supports. if you have to add more language, add the folder name which you have created in locales in languages variable.

                           
   export const fallbackLng = "en"; 
   export const languages = ["en", "ae", "fr", "es", "du", "pt", "cn"];
   export const defaultNS = "translation";
   
   export function getOptions(lng = fallbackLng, ns = defaultNS) {
     return {
       supportedLngs: languages,
       fallbackLng,
       lng,
       fallbackNS: defaultNS,
       defaultNS,
       ns,
     };
   }
                     

4. We have now wrapped the entire app component with an I18nProvider that has a prop language whose value will be your current language in order to access the languages throughout the entire app.

   import type { Metadata } from "next";
   import NoSsr from "@/utils/NoSsr";
   import "../../src/index.scss";
   import MainProvider from "./MainProvider";
   import { detectLanguage } from "./i18n/server";
   import { I18nProvider } from "./i18n/i18n-context";
   
   export default async function RootLayout({children,}: Readonly<{children: React.ReactNode;}>) {
     const lng = await detectLanguage();
     return (
       <I18nProvider language={lng}>
       <html>
         <head>
           <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet" />
           <link rel="stylesheet" href="https://unpkg.com/@icon/icofont/icofont.css"></link>
           <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjeJEPREBQFvAIqDSZliF0WjQrCld-Mh0"></script>
         </head>
         <body suppressHydrationWarning={true}>
           <NoSsr>
             <MainProvider>{children}</MainProvider>
           </NoSsr>
         </body>
       </html>
       </I18nProvider>
     );
   }
    




5. In the Language file we are passing the params as same as we have mention in the JSON file. To get more idea about this refer the below code.

   import { languageData } from "@/Data/Layout/LanguageData";
   import ConfigDB from "@/Config/ThemeConfig";
   import { Href } from "@/Constant";
   import { LanguagesData } from "@/Data/Layout";
   import { LanguageDataType } from "@/Types/LayoutTypes";
   import Link from "next/link";
   import { useRouter } from "next/navigation";
   import { useEffect, useState } from "react";
   import { useTranslation } from "react-i18next";        
   
   const Languages = () => {
     const router = useRouter();
     const { i18n } = useTranslation();
     const currentLanguage = i18n.resolvedLanguage;
     const [selectedLang, setSelectedLang] = useState({});
     const changeLanguage = (lng: LanguageDataType) => i18n.changeLanguage(lng.icon);
     const localStorageLayout = ConfigDB.data.settings.layout_type;
   
     useEffect(() => {
       const defaultLanguage = LanguagesData.find((data) => data.icon == currentLanguage);
       setSelectedLang(defaultLanguage);
       router.refresh();
     }, []);
   
     return (
       <li className="onhover-dropdown">
         <div className="cart-box text-uppercase f-w-700 d-flex align-items-center">
           <span>{currentLanguage}</span>
         </div>
         <div className="language-dropdown onhover-show-div language-width">
           <ul className="language-list">
             {LanguagesData?.map((item, i) => (
               <li className="p-0" key={i} onClick={() => changeLanguage(item)}>
                 <Link className="text-decoration-none" data-lng={item.icon} href={Href}>
                   <i className={item.logo} /> {item.title}
                 </Link>
               </li>
             ))}
           </ul>
         </div>
       </li>
     );
   };
   
   export default Languages;




6. Now we need to wrap the content to get reflect of languages. Below are the given example.

   import React, { Fragment, useState } from 'react';
   import { useTranslation } from 'react-i18next';
   
   const SidebarMenuItems = () => {
   
   const { t } = useTranslation("common");
   
   return(
       <ul>
         <li>{t('Dashboard')}</li>
         <li>{t('Ecommerce')}</li>
       </ul>
     )
   }
   
   export default SidebarMenuItems;

   
   

   Tip: For more information on react-i18next you can visit the official documentation on react-i18next