1
 2import { Flex, Text } from '@chakra-ui/react'
 3import { useDashboard } from 'stores';
 4import { Link as ReactRouterLink } from 'react-router-dom'
 5import { Link as ChakraLink } from '@chakra-ui/react'
 6import { Icon } from 'components/icon';
 7import { FC, useEffect, useState } from 'react';
 8import { useTranslation } from 'react-i18next';
 9import { PageType } from 'types';
10
11export type SideBarItemProps = {
12  page: PageType,
13}
14
15export const SidebarItem: FC<SideBarItemProps> = ({ page }) => {
16  const { t } = useTranslation();
17  const { activePage, activatePage, isCollapsed } = useDashboard();
18  const [active, activate] = useState(page === activePage);
19
20  useEffect(() => { activate(page === activePage) }, [active, activePage]);
21
22  const darkStyle = { bg: active ? 'primary.900' : 'transparent' };
23  const hoverStyle = {
24    borderRadius: 10,
25    bg: active ? undefined : 'gray.200',
26    _dark: {
27      bg: 'gray.700'
28    },
29    transition: 'background-color 0.9s',
30  };
31  const ItemIcon = page.itemIcon;
32  return (
33    <ChakraLink
34      as={ReactRouterLink}
35      borderRadius={10}
36      bg={active ? 'primary.500' : 'transparent'}
37      border="4px"
38      borderColor="transparent"
39      _dark={darkStyle}
40      to={page.path}
41      w="85%"
42      _hover={hoverStyle}
43      onClick={() => {
44        activatePage(page);
45      }}
46    >
47      <Flex flexDir="row" alignItems="center" justifyContent={isCollapsed ? 'center' : undefined} >
48        <Icon color="">
49          <ItemIcon color={active ? 'gray.100' : undefined} _dark={{ color: active ? 'gray.100' : undefined }} />
50        </Icon>
51        <Text
52          color={active ? 'gray.100' : 'gray.700'}
53          _dark={{ color: 'gray.100' }} fontSize="xl"
54          display={isCollapsed ? 'none' : 'block'}>
55          {t(page.name)}
56        </Text>
57      </Flex>
58    </ChakraLink>
59  );
60}