bro.config.js

@@ -14,8 +14,8 @@ module.exports = {
     'dry-wash.main': '/dry-wash',
     'dry-wash.create': '/order',
     'dry-wash.view.order': '/order/:orderId',
-    'dry-wash.arm.master': '/master',
+    'dry-wash.arm.master': 'master',
-    'dry-wash.arm.order': '/order',
+    'dry-wash.arm.order': 'order',
     'dry-wash.arm': '/arm/*',
   },
   features: {

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'
+            colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
-            variant='ghost'
+            variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
           >
             {t('orders')}
           </Button>
@@ -42,8 +45,8 @@ const Sidebar = () => {
             as={Link}
             to={URLs.armMaster.url}
             w='100%'
-            colorScheme='green'
+            colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
-            variant='ghost'
+            variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
           >
             {t('master')}
           </Button>