localize main menu (#477)

* localize main menu

* ♻️ Move close to glossary

Author: jollyjerr

packages/common/src/i18n/en.ts

@@ -44,6 +44,7 @@ export default {
       friday: "Friday",
       saturday: "Saturday",
     },
+    close: "Close",
   },
   hotlines: {
     nationalSuicidePreventionLifeline: {
@@ -206,4 +207,12 @@ export default {
   alerts: {
     closeAlerts: "Close Alerts",
   },
+  mainMenu: {
+    resourcesWithinReach: "Resources within reach",
+    about: "About",
+    termsOfUse: "Terms of Use",
+    privacyPolicy: "Privacy Policy",
+    home: "Home",
+    favorites: "Favorites",
+  },
 };

packages/common/src/i18n/es.ts

@@ -44,6 +44,7 @@ export default {
       friday: "Viernes",
       saturday: "Sábado",
     },
+    close: "Final",
   },
   hotlines: {
     nationalSuicidePreventionLifeline: {
@@ -208,4 +209,12 @@ export default {
   alerts: {
     closeAlerts: "Cerrar Alertas",
   },
+  mainMenu: {
+    resourcesWithinReach: "Recursos al Alcance",
+    about: "Acerca de",
+    termsOfUse: "Términos de Uso",
+    privacyPolicy: "Política de Privacidad",
+    home: "Casa",
+    favorites: "Favoritos",
+  },
 };

packages/web/src/components/MenuDrawer.tsx

@@ -20,6 +20,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import Typography from "@material-ui/core/Typography";
 import makeStyles from "@material-ui/styles/makeStyles";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme: Theme) => ({
   drawerPaper: {
@@ -33,6 +34,7 @@ interface MenuDrawerProps {
 }
 
 const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
+  const { t } = useTranslation(["mainMenu", "glossary"]);
   const classes = useStyles();
   return (
     <Drawer
@@ -43,7 +45,7 @@ const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
       <Grid container direction="column">
         <Grid container item justify="flex-end">
           <IconButton onClick={() => handleMenuClose()}>
-            <Typography variant="srOnly">close menu</Typography>
+            <Typography variant="srOnly">{t("glossary:close")}</Typography>
             {CloseIcon}
           </IconButton>
         </Grid>
@@ -55,7 +57,7 @@ const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
               onClick={() => handleMenuClose()}
               to="/"
             >
-              <Typography variant="srOnly">home</Typography>
+              <Typography variant="srOnly">{t("home")}</Typography>
               <Box maxWidth="100%" width={250}>
                 <Logo />
               </Box>
@@ -67,7 +69,7 @@ const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
               to="/about"
             >
               <ListItemIcon>{InfoIcon}</ListItemIcon>
-              <ListItemText>About</ListItemText>
+              <ListItemText>{t("about")}</ListItemText>
             </ListItem>
             <ListItem
               button
@@ -76,7 +78,7 @@ const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
               to="/terms-of-use"
             >
               <ListItemIcon>{TermsOfServiceIcon}</ListItemIcon>
-              <ListItemText>Terms of Use</ListItemText>
+              <ListItemText>{t("termsOfUse")}</ListItemText>
             </ListItem>
             <ListItem
               button
@@ -85,7 +87,7 @@ const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
               to="/privacy-policy"
             >
               <ListItemIcon>{PolicyIcon}</ListItemIcon>
-              <ListItemText>Privacy policy</ListItemText>
+              <ListItemText>{t("privacyPolicy")}</ListItemText>
             </ListItem>
             <ListItem
               button
@@ -94,7 +96,7 @@ const MenuDrawer = ({ handleMenuClose, open }: MenuDrawerProps) => {
               to="/favorites"
             >
               <ListItemIcon>{FavoriteIcon}</ListItemIcon>
-              <ListItemText>Favorites</ListItemText>
+              <ListItemText>{t("favorites")}</ListItemText>
             </ListItem>
           </List>
         </Grid>

yarn.lock

@@ -4271,9 +4271,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
-  version "1.0.30001170"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz"
-  integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
+  version "1.0.30001238"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001238.tgz"
+  integrity sha512-bZGam2MxEt7YNsa2VwshqWQMwrYs5tR5WZQRYSuFxsBQunWjBuXhN4cS9nV5FFb1Z9y+DoQcQ0COyQbv6A+CKw==
 
 canonical-instance@^2.0.0:
   version "2.0.0"