feat: add multilingualism (#35)

src/components/Sidebar/Sidebar.tsx

@@ -1,46 +1,51 @@
-import { Box, Button, Heading, VStack } from '@chakra-ui/react';
+import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
 import React from 'react';
-import { Divider } from '@chakra-ui/react';
-import i18next from 'i18next';
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
-const Sidebar = () => (
-  <Box
-    borderRight='1px solid black'
-    bg='gray.50'
-    color='white'
-    w='250px'
-    p='5'
-    pt='8'
-  >
-    <Heading color='green' size='lg' mb='5'>
-      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
-    </Heading>
+const Sidebar = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.sideBar',
+  });
 
-    <VStack align='start' spacing='4'>
-      <Divider />
-      <Button
-        as={Link}
-        to='orders'
-        w='100%'
-        colorScheme='green'
-        variant='ghost'
-      >
-        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
-      </Button>
-      <Divider />
-      <Button
-        as={Link}
-        to='masters'
-        w='100%'
-        colorScheme='green'
-        variant='ghost'
-      >
-        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
-      </Button>
-      <Divider />
-    </VStack>
-  </Box>
-);
+  return (
+    <Box
+      borderRight='1px solid black'
+      bg='gray.50'
+      color='white'
+      w='250px'
+      p='5'
+      pt='8'
+    >
+      <Heading color='green' size='lg' mb='5'>
+        {t('title')}
+      </Heading>
+
+      <VStack align='start' spacing='4'>
+        <Divider />
+        <Button
+          as={Link}
+          to='orders'
+          w='100%'
+          colorScheme='green'
+          variant='ghost'
+        >
+          {t('orders')}
+        </Button>
+        <Divider />
+        <Button
+          as={Link}
+          to='masters'
+          w='100%'
+          colorScheme='green'
+          variant='ghost'
+        >
+          {t('master')}
+        </Button>
+        <Divider />
+      </VStack>
+    </Box>
+  );
+};
 
 export default Sidebar;