Using the newly created Dropdown component in /components/NavBar/Dropdown.jsx, add a dropdown to the navbar that allows the user to switch between English, Russian, Chinese, and Turkish (the dropdown links should show the full language name, not the language codes). To implement internationalization, we’re going to be using the i18n and react-i18n libraries, which come with a handy changeLanguage() function. The setup to use those libraries is already there: to test that it’s working, go to the About page and add /?lng=ru to the URL and the About Us header should change languages. To test that your dropdown is working, you can either do the same, or check the current value in the Inspect tools:
When a user selects a language, the dropdown button should show the language picked. the selected language should also be saved so that when the user goes back to the site they don’t have to reselect their language.
(Optional): When the user first opens the site, get the user’s default language and set it to the dropdown button text.
tony1759
commented
4 days ago
Task Description:
Hi! Merhaba! Привет! 你好!
Using the newly created Dropdown component in /components/NavBar/Dropdown.jsx, add a dropdown to the navbar that allows the user to switch between English, Russian, Chinese, and Turkish (the dropdown links should show the full language name, not the language codes). To implement internationalization, we’re going to be using the i18n and react-i18n libraries, which come with a handy
changeLanguage()function. The setup to use those libraries is already there: to test that it’s working, go to the About page and add /?lng=ru to the URL and the About Us header should change languages. To test that your dropdown is working, you can either do the same, or check the current value in the Inspect tools:When a user selects a language, the dropdown button should show the language picked. the selected language should also be saved so that when the user goes back to the site they don’t have to reselect their language. (Optional): When the user first opens the site, get the user’s default language and set it to the dropdown button text.
References and Resources:
Figma https://www.i18next.com/ https://react.i18next.com/ (this is how we’re implementing internationalization but has a short bit about changing language which may be helpful) https://javascript.plainenglish.io/react-localization-the-winner-is-i18next-i18nexus-b7cd9f14094e )
Acceptance Criteria: