feat: add sideBar active(#36)

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 { useLocation, Link } from 'react-router-dom';
 import i18next from 'i18next';
-import { Link } from 'react-router-dom';
 
-const Sidebar = () => (
+const Sidebar = () => {
-  <Box
+  const location = useLocation();
-    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>
 
-    <VStack align='start' spacing='4'>
+  const isActive = (keyword: string) => location.pathname.includes(keyword);
-      <Divider />
+
-      <Button
+  return (
-        as={Link}
+    <Box
-        to='orders'
+      borderRight='1px solid black'
-        w='100%'
+      bg='gray.50'
-        colorScheme='green'
+      color='white'
-        variant='ghost'
+      w='250px'
-      >
+      p='5'
-        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
+      pt='8'
-      </Button>
+    >
-      <Divider />
+      <Heading color='green' size='lg' mb='5'>
-      <Button
+        {i18next.t(`dry-wash.arm.master.sideBar.title`)}
-        as={Link}
+      </Heading>
-        to='masters'
+
-        w='100%'
+      <VStack align='start' spacing='4'>
-        colorScheme='green'
+        <Divider />
-        variant='ghost'
+        <Button
-      >
+          as={Link}
-        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
+          to='orders'
-      </Button>
+          w='100%'
-      <Divider />
+          colorScheme={isActive('orders') ? 'green' : 'blue'}
-    </VStack>
+          variant={isActive('orders') ? 'solid' : 'ghost'}
-  </Box>
+        >
-);
+          {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
+        </Button>
+        <Divider />
+        <Button
+          as={Link}
+          to='masters'
+          w='100%'
+          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;