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 svelte-i18n, you can install it by running the following command in the terminal.

npm i svelte-i18n

svelte-i18n package configuration and implementation in the project:

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

Requirements

• Node: >= 11.15.0
• Browsers: Chrome 38+, Edge 16+, Firefox 13+, Opera 25+, Safari 8+.

1. A locale dictionary is a regular JSON object which contains message definitions for a certain language.

   
   

   // en.json
       {
           "General": "General",
           "Dashboard": "Dashboard",
           "Default": "Default",
           "Ecommerce": "Ecommerce",
           "OnlineCource":"Online Cource",
           "Crypto":"Crypto",
           "Social":"Social",
           "POS":"POS",
           "Chart": "Chart"
       }
   
       //ae.json
       {
           "General": "جنرال لواء",
           "Dashboard": "لوحة القيادة",
           "Default": "إفتراضي",
           "Ecommerce": "التجارة الإلكترونية",
           "OnlineCource":"دورة على شبكة الإنترنت",
           "Crypto":"تشفير",
           "Social":"اجتماعي",
           "Chart": "مخطط"
       }
   
       //cn.json
       {
           "General": "一般",
           "Dashboard": "仪表板",
           "Default": "默认",
           "Ecommerce": "电子商务",
           "OnlineCource":"在线课程",
           "Crypto":"加密货币",
           "Social":"社会的",
           "Chart": "图表"
       }
   
       //de.json
       {
           "General": "Algemeen",
           "Dashboard": "Dashboard",
           "Default": "Standaard",
           "Ecommerce": "E-commerce",
           "OnlineCource":"Online cursus",
           "Crypto":"cryptovaluta",
           "Social":"Sociaal",
           "Chart": "Grafiek"
       }
   
       //es.json
       {
           "General": "General",
           "Dashboard": "Tablero",
           "Default": "Defecto",
           "Ecommerce": "Comercio electrónico",
           "OnlineCource":"Curso por Internet",
           "Crypto":"Cripto",
           "Social":"Social",
           "Chart": "Gráfico"
       }
   
       //fr.json
       {
           "General": "Générale",
           "Dashboard": "Tableau de bord",
           "Default": "Défaut",
           "Ecommerce": "Commerce électronique",
           "OnlineCource":"Cours en ligne",
           "Crypto":"Crypto",
           "Social":"Sociale",
           "Chart": "Graphique"
       }
   
       //pt.json
       {
           "General": "Geral",
           "Dashboard": "painel de controle",
           "Default": "Padrão",
           "Ecommerce": "Comércio eletrônico",
           "OnlineCource":"Curso online",
           "Crypto":"Criptografia",
           "Social":"Social",
           "Chart": "Gráfico"
       }
                               

   
   

   Language.svelte