From 5d1a679c68433347d9acdd2a9c9009d192d16b8f Mon Sep 17 00:00:00 2001
From: ilnaz <237x237@gmail.com>
Date: Sat, 23 Nov 2024 18:34:53 +0300
Subject: [PATCH] feat: add sideBar active(#36)

---
 src/components/Sidebar/Sidebar.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 43ebf1a..1d32063 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/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>