Internationalization of Vertical Navigation Bar in Web UI

Merge branch 'PR46' into develop

web/src/components/navbar/NavbarVertical.js

@@ -12,8 +12,9 @@ import Logo from './Logo';
 import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
 import NavbarVerticalMenu from './NavbarVerticalMenu';
 import ToggleButton from './ToggleButton';
+import { withTranslation } from 'react-i18next';
 
-const NavbarVertical = ({ navbarStyle }) => {
+const NavbarVertical = ({ navbarStyle, t }) => {
   const navBarRef = useRef(null);
 
   const {
@@ -113,7 +114,7 @@ const NavbarVertical = ({ navbarStyle }) => {
             block
             className="my-3 btn-purchase"
           >
-            Purchase
+            {t('Purchase')}
           </Button>
         </div>
       </Collapse>
@@ -129,4 +130,4 @@ NavbarVertical.defaultProps = {
   navbarStyle: 'transparent'
 };
 
-export default NavbarVertical;
+export default withTranslation()(NavbarVertical);

web/src/components/navbar/NavbarVerticalMenuItem.js

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Badge } from 'reactstrap';
 import Flex from '../common/Flex';
+import { withTranslation } from 'react-i18next';
 
-const NavbarVerticalMenuItem = ({ route }) => (
+const NavbarVerticalMenuItem = ({ route, t }) => (
   <Flex align="center">
     {route.icon && (
       <span className="nav-link-icon">
         <FontAwesomeIcon icon={route.icon} />
       </span>
     )}
-    <span className="nav-link-text">{route.name}</span>
+    <span className="nav-link-text">{t(route.name)}</span>
     {!!route.badge && (
       <Badge color={route.badge.color || 'soft-success'} pill className="ml-2">
         {route.badge.text}
@@ -27,4 +28,4 @@ NavbarVerticalMenuItem.propTypes = {
   }).isRequired
 };
 
-export default React.memo(NavbarVerticalMenuItem);
+export default withTranslation()(React.memo(NavbarVerticalMenuItem));

web/src/components/navbar/ToggleButton.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
 
-const ToggleButton = ({ isNavbarVerticalCollapsed, setIsNavbarVerticalCollapsed }) => (
+const ToggleButton = ({ isNavbarVerticalCollapsed, setIsNavbarVerticalCollapsed, t }) => (
   <>
     <UncontrolledTooltip placement="left" target="toggleNavigationTooltip">
-      Toggle Navigation
+      {t('Toggle Navigation')}
     </UncontrolledTooltip>
     <div className="toggle-icon-wrapper">
       <Button
@@ -24,4 +25,4 @@ const ToggleButton = ({ isNavbarVerticalCollapsed, setIsNavbarVerticalCollapsed
   </>
 );
 
-export default ToggleButton;
+export default withTranslation()(ToggleButton);

web/src/i18n.js

@@ -346,6 +346,8 @@ const resources = {
       "Bank Name": "Bank Name",
       "Bank Address": "Bank Address",
       "RMB Account": "RMB Account",
+      // button
+      "Toggle Navigation": "Toggle Navigation",
     }
   },
   de: {
@@ -693,6 +695,8 @@ const resources = {
       "Bank Name": "Bank Name",
       "Bank Address": "Bankadresse",
       "RMB Account": "RMB-Konto",
+      // button
+      "Toggle Navigation": "Navigation umschalten",
     }
   },
   zh_cn: {
@@ -1040,6 +1044,8 @@ const resources = {
       "Bank Name": "开户银行",
       "Bank Address": "银行地址",
       "RMB Account": "人民币账户",
+      // button
+      "Toggle Navigation": "切换导航",
     }
   }
 };