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