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 = () => (
-  <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 location = useLocation();
 
-    <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>
-);
+  const isActive = (keyword: string) => location.pathname.includes(keyword);
+
+  return (
+    <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>
+
+      <VStack align='start' spacing='4'>
+        <Divider />
+        <Button
+          as={Link}
+          to='orders'
+          w='100%'
+          colorScheme={isActive('orders') ? 'green' : 'blue'}
+          variant={isActive('orders') ? 'solid' : 'ghost'}
+        >
+          {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;