feat: add sideBar active(#36)

src/components/Sidebar/Sidebar.tsx

@@ -1,10 +1,14 @@
-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 { useLocation, Link } from 'react-router-dom';
 import i18next from 'i18next';
-import { Link } from 'react-router-dom';
 
-const Sidebar = () => (
+const Sidebar = () => {
+  const location = useLocation();
+
+  const isActive = (keyword: string) => location.pathname.includes(keyword);
+
+  return (
     <Box
       borderRight='1px solid black'
       bg='gray.50'
@@ -23,8 +27,8 @@ const Sidebar = () => (
           as={Link}
           to='orders'
           w='100%'
-        colorScheme='green'
-        variant='ghost'
+          colorScheme={isActive('orders') ? 'green' : 'blue'}
+          variant={isActive('orders') ? 'solid' : 'ghost'}
         >
           {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
         </Button>
@@ -33,14 +37,15 @@ const Sidebar = () => (
           as={Link}
           to='masters'
           w='100%'
-        colorScheme='green'
-        variant='ghost'
+          colorScheme={isActive('masters') ? 'green' : 'blue'}
+          variant={isActive('masters') ? 'solid' : 'ghost'}
         >
           {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
         </Button>
         <Divider />
       </VStack>
     </Box>
-);
+  );
+};
 
 export default Sidebar;