Multi Language

1. Add content

                        
// ----------------------------------------------------
// File: src/utils/languages/ar.json  
// ----------------------------------------------------  

{
  "Modern": "عصري",
  "Contacts":"جهات الاتصال",
  "Chats":"الدردشات"
}



// ----------------------------------------------------
// File: src/utils/languages/en.json  
// ----------------------------------------------------  

{
  "Modern": "Modern",
  "Contacts":"Contacts",
  "Chats":"Chats"
}



// ----------------------------------------------------
// File: src/utils/languages/ch.json  
// ----------------------------------------------------  

{
  "Modern": "現代的",
  "Contacts":"聯繫人",
  "Chats":"聊天記錄"
}



// ----------------------------------------------------
// File: src/utils/languages/fr.json  
// ---------------------------------------------------- 

{
  "Modern": "Moderne",
  "Contacts":"Les contacts",
  "Chats":"Chattes"
}

2. Usage

  
    // ----------------------------------------------------
    // File: src/layouts/full/vertical/header/language.tsx  
    // ---------------------------------------------------- 
    
    import React from 'react';
    import { Avatar, IconButton, Menu, MenuItem, Typography } from '@mui/material';
    import { useSelector, useDispatch } from 'src/store/Store';
    import { setLanguage } from 'src/store/customizer/CustomizerSlice';
    import FlagEn from 'src/assets/images/flag/icon-flag-en.svg';
    import FlagFr from 'src/assets/images/flag/icon-flag-fr.svg';
    import FlagCn from 'src/assets/images/flag/icon-flag-cn.svg';
    import FlagSa from 'src/assets/images/flag/icon-flag-sa.svg';
    import { Stack } from '@mui/system';
    import { useTranslation } from 'react-i18next';
    import { useEffect } from 'react';
    import { AppState } from 'src/store/Store';
    
    const Languages = [
        {
            flagname: 'English (UK)',
            icon: FlagEn,
            value: 'en',
        },
        {
            flagname: '中国人 (Chinese)',
            icon: FlagCn,
            value: 'ch',
        },
        {
            flagname: 'français (French)',
            icon: FlagFr,
            value: 'fr',
        },
    
        {
            flagname: 'عربي (Arabic)',
            icon: FlagSa,
            value: 'ar',
        },
    ];
    
    const Language = () => {
        const [anchorEl, setAnchorEl] = React.useState(null);
        const dispatch = useDispatch();
        const open = Boolean(anchorEl);
        const customizer = useSelector((state: AppState) => state.customizer);
        const currentLang =
        Languages.find((_lang) => _lang.value === customizer.isLanguage) || Languages[1];
        const { i18n } = useTranslation();
        const handleClick = (event: any) => {
        setAnchorEl(event.currentTarget);
        };
        const handleClose = () => {
        setAnchorEl(null);
        };
        useEffect(() => {
        i18n.changeLanguage(customizer.isLanguage);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    
    return (
    <>
    <IconButton
        aria-label="more"
        id="long-button"
        aria-controls={open ? 'long-menu' : undefined}
        aria-expanded={open ? 'true' : undefined}
        aria-haspopup="true"
        onClick={handleClick}
        >
        <Avatar src={currentLang.icon} alt={currentLang.value} sx={{ width: 20, height: 20 }} />
        </IconButton>
        <Menu
        id="long-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        sx={{
          '& .MuiMenu-paper': {
            width: '200px',
          },
        }}
        >
        {Languages.map((option, index) => (
            <MenuItem
            key={index}
            sx={{ py: 2, px: 3 }}
            onClick={() => dispatch(setLanguage(option.value))}
            >
            <Stack direction="row" spacing={1} alignItems="center">
            <Avatar src={option.icon} alt={option.icon} sx={{ width: 20, height: 20 }} /<
              <Typography> {option.flagname}</Typography>
              </Stack>
          
        ))}
        </Menu>
        </>
    );
};
    
export default Language;