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

---
 src/components/Sidebar/Sidebar.tsx | 85 ++++++++++++++++--------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 4ae207a..23bda45 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/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;
-- 
2.45.2


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 2/3] 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>
-- 
2.45.2


From da244adee0f2e298321aaa34d2b30a63a5a245e8 Mon Sep 17 00:00:00 2001
From: ilnaz <237x237@gmail.com>
Date: Sun, 24 Nov 2024 22:37:19 +0300
Subject: [PATCH 3/3] fix: Update URL references and conditional checks (#36)

---
 bro.config.js                      | 4 ++--
 src/components/Sidebar/Sidebar.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/bro.config.js b/bro.config.js
index 271e8db..f12638a 100644
--- a/bro.config.js
+++ b/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.order': '/order',
+    'dry-wash.arm.master': 'master',
+    'dry-wash.arm.order': 'order',
     'dry-wash.arm': '/arm/*',
   },
   features: {
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 1d32063..0e6a068 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -33,8 +33,8 @@ const Sidebar = () => {
             as={Link}
             to={URLs.armOrder.url}
             w='100%'
-            colorScheme={isActive('orders') ? 'green' : 'blue'}
-            variant={isActive('orders') ? 'solid' : 'ghost'}
+            colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
+            variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
           >
             {t('orders')}
           </Button>
@@ -45,8 +45,8 @@ const Sidebar = () => {
             as={Link}
             to={URLs.armMaster.url}
             w='100%'
-            colorScheme={isActive('masters') ? 'green' : 'blue'}
-            variant={isActive('masters') ? 'solid' : 'ghost'}
+            colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
+            variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
           >
             {t('master')}
           </Button>
-- 
2.45.2