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