diff --git a/app/dashboard/src/components/Sidebar/index.tsx b/app/dashboard/src/components/Sidebar/index.tsx
@@ -24,32 +24,48 @@ export const SidebarMenuIcon = chakra(HamburgerIcon, {
});
export const SidebarItem: FC<SideBarItemProps & { index: number }> = ({ itemIcon: ItemIcon, name, path, index, }) => {
- const hoverStyle = {
- borderRadius: 4,
- border: '4px',
- m: '-2px',
- borderColor: 'primary.100',
- };
- const activeStyle = {
- bg: 'primary.500',
- ...hoverStyle,
- };
const { t } = useTranslation();
const { activePage, activatePage } = useDashboard();
const [active, activate] = useState(index === activePage)
useEffect(() => { activate(index === activePage) }, [active, activePage]);
+ const darkStyle = { bg: active ? 'primary.900' : 'transparent' };
+ const hoverStyle = {
+ borderRadius: 10,
+ bg: active ? undefined : 'gray.200',
+ _dark: {
+ bg: 'gray.700'
+ },
+ transition: 'background-color 0.9s',
+ };
+
return (
- <ChakraLink as={ReactRouterLink} sx={active ? activeStyle : {}} to={path} w="13rem" _hover={hoverStyle} onClick={() => { activatePage(index) }}>
- <Flex flexDir="row" alignItems="center">
- <Icon color="primary.500">
- <ItemIcon color={active ? 'white' : 'primary.500'} />
+ <ChakraLink
+ as={ReactRouterLink}
+ borderRadius={10}
+ bg={active ? 'primary.500' : 'transparent'}
+ border="4px"
+ ps="4px"
+ borderColor="transparent"
+ _dark={darkStyle}
+ to={path}
+ w="13rem"
+ _hover={hoverStyle}
+ onClick={() => {
+ activatePage(index);
+ }}
+ >
+ <Flex flexDir="row" alignItems="center" >
+ <Icon color="">
+ <ItemIcon color={active ? 'gray.100' : undefined} _dark={{ color: active ? 'gray.100' : undefined }} />
</Icon>
- <Text color={active ? 'white' : 'black'} fontSize="xl">{t(name)}</Text>
+ <Text color={active ? 'gray.100' : 'gray.700'} _dark={{ color: 'gray.100' }} fontSize="xl" >
+ {t(name)}
+ </Text>
</Flex>
</ChakraLink>
- )
+ );
}
export const Sidebar = () => {
@@ -59,13 +75,14 @@ export const Sidebar = () => {
pos="sticky"
left="5"
borderRightWidth="4px"
- borderRightColor="primary.100"
+ borderRightColor='gray.200'
borderRightStyle="solid"
flexDir="column"
h="100vh"
bg="gray.50"
+ _dark={{ bg: 'gray.800', borderRightColor: 'gray.700' }}
>
- <VStack pt="30px" gap="6">
+ <VStack pt="30px" gap="2">
<Image src="favicon/logo.svg" alt="marzneshin" boxSize="50px" />
{pages.map((item: SideBarItemProps, index: number) =>
<SidebarItem path={item.path} name={item.name} itemIcon={item.itemIcon} index={index} />)}