61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
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',
|
|
});
|
|
|
|
return (
|
|
<Box
|
|
borderRight='1px solid black'
|
|
bg='gray.50'
|
|
color='white'
|
|
w='250px'
|
|
p='5'
|
|
pt='8'
|
|
>
|
|
<Heading color='green' size='lg' mb='5'>
|
|
{t('title')}
|
|
</Heading>
|
|
|
|
<VStack align='start' spacing='4'>
|
|
<Divider />
|
|
{URLs.armOrder.isOn && (
|
|
<Button
|
|
as={Link}
|
|
to={URLs.armOrder.url}
|
|
w='100%'
|
|
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
|
|
variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
|
|
>
|
|
{t('orders')}
|
|
</Button>
|
|
)}
|
|
<Divider />
|
|
{URLs.armMaster.isOn && (
|
|
<Button
|
|
as={Link}
|
|
to={URLs.armMaster.url}
|
|
w='100%'
|
|
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
|
|
variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
|
|
>
|
|
{t('master')}
|
|
</Button>
|
|
)}
|
|
<Divider />
|
|
</VStack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|