src/components/Sidebar/Sidebar.tsx

@@ -1,11 +1,14 @@
 import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useLocation, Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { URLs } from '../../__data__/urls';
 
 const Sidebar = () => {
+  const location = useLocation();
+  const isActive = (keyword: string) => location.pathname.includes(keyword);
+
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.arm.master.sideBar',
   });
@@ -30,8 +33,8 @@ const Sidebar = () => {
             as={Link}
             to={URLs.armOrder.url}
             w='100%'
-            colorScheme='green'
-            variant='ghost'
+            colorScheme={isActive('orders') ? 'green' : 'blue'}
+            variant={isActive('orders') ? 'solid' : 'ghost'}
           >
             {t('orders')}
           </Button>
@@ -42,8 +45,8 @@ const Sidebar = () => {
             as={Link}
             to={URLs.armMaster.url}
             w='100%'
-            colorScheme='green'
-            variant='ghost'
+            colorScheme={isActive('masters') ? 'green' : 'blue'}
+            variant={isActive('masters') ? 'solid' : 'ghost'}
           >
             {t('master')}
           </Button>