translations

public/locales/en/translations.json

@@ -12,9 +12,10 @@
     "English": "English",
     "Romanian": "Romanian"
   },
-  "Steps": {
+  "Menu": {
-    "Login": "Login",
+    "Dashboard": "Dashboard",
-    "Network": "Network",
+    "Machines": "Machines",
+    "Trash": "Trash",
     "Settings": "Settings"
   },
   "Login": {

public/locales/ro/translations.json

@@ -3,9 +3,10 @@
     "English": "Engleză",
     "Romanian": "Română"
   },
-  "Steps": {
+  "Menu": {
-    "Login": "Autentificare",
+    "Dashboard": "Bord",
-    "Network": "Rețea",
+    "Machines": "Mașini",
+    "Trash": "Gunoi",
     "Settings": "Setări"
   },
   "Login": {

src/components/layout/Sidebar.js

@@ -18,6 +18,7 @@ import DnsIcon from "@material-ui/icons/Dns";
 import SettingsIcon from "@material-ui/icons/Settings";
 import DashboardIcon from "@material-ui/icons/Dashboard";
 import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import styles from "./styles";
 
 const useStyles = makeStyles(styles);
@@ -26,6 +27,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
   const classes = useStyles();
   const theme = useTheme();
   const history = useHistory();
+  const { t } = useTranslation();
 
   return (
     <Drawer
@@ -60,7 +62,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <DashboardIcon />
           </ListItemIcon>
-          <ListItemText primary={"Dashboard"} />
+          <ListItemText primary={t("Menu.Dashboard")} />
         </ListItem>
         <ListItem
           button
@@ -70,7 +72,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <DnsIcon />
           </ListItemIcon>
-          <ListItemText primary={"Machines"} />
+          <ListItemText primary={t("Menu.Machines")} />
         </ListItem>
       </List>
       <Divider />
@@ -79,7 +81,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <DeleteIcon />
           </ListItemIcon>
-          <ListItemText primary={"Trash"} />
+          <ListItemText primary={t("Menu.Trash")} />
         </ListItem>
         <ListItem
           button
@@ -89,7 +91,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>
-          <ListItemText primary={"Settings"} />
+          <ListItemText primary={t("Menu.Settings")} />
         </ListItem>
       </List>
     </Drawer>