163 lines
5.0 KiB
JavaScript
163 lines
5.0 KiB
JavaScript
import {
|
|
Text, Box, CloseButton, Flex, Icon, useColorModeValue,
|
|
Stack, Select,
|
|
} from '@chakra-ui/react'
|
|
import { FiArrowRight, FiHome, FiTrendingUp } from 'react-icons/fi'
|
|
import { useApp } from '../AppContext'
|
|
import { Logo } from './Logo'
|
|
import { ColorModeSwitcher } from './ColorModeSwitcher'
|
|
import { Link } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useLocalStorage } from '../hooks'
|
|
import { Lang } from './Lang'
|
|
import { supportedLangs } from '../i18'
|
|
|
|
const NavItem = ({ icon, path, onClick, children, ...rest }) => {
|
|
return (
|
|
<Link to={path}>
|
|
<Flex
|
|
align="center"
|
|
p="4"
|
|
mx="4"
|
|
borderRadius="lg"
|
|
role="group"
|
|
cursor="pointer"
|
|
onClick={onClick}
|
|
_hover={{ bg: 'cyan.400', color: 'white' }}
|
|
{...rest}
|
|
>
|
|
{icon && (
|
|
<Icon mr="4" fontSize="16" _groupHover={{ color: 'white' }} as={icon} />
|
|
)}
|
|
|
|
{children}
|
|
</Flex>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const DocItem = ({ path, children, ...rest }) => {
|
|
return (
|
|
<Link to={path}>
|
|
<Flex
|
|
align="center"
|
|
p="4"
|
|
mx="4"
|
|
borderRadius="lg"
|
|
role="group"
|
|
cursor="pointer"
|
|
fontFamily="monospace"
|
|
fontSize="12"
|
|
color="gray.400"
|
|
_hover={{ bg: 'gray.600', color: 'white' }}
|
|
justifyContent="space-between"
|
|
{...rest}
|
|
>
|
|
{children}
|
|
<Icon mr="4" fontSize="16" _groupHover={{ color: 'white' }} as={FiArrowRight} />
|
|
</Flex>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const SocialItem = ({ icon, path, ...rest }) => {
|
|
return (
|
|
<a href={path} target="_blank" rel="noreferrer">
|
|
<Icon _hover={{ color: 'gray.900' }} as={icon} />
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export const SideBar = ({ onClose, ...rest }) => {
|
|
const app = useApp()
|
|
|
|
const bg = useColorModeValue('white', 'gray.900')
|
|
const { t, i18n } = useTranslation()
|
|
// const colorBorderRight = useColorModeValue('gray.200', 'gray.700')
|
|
|
|
const menuItems = [
|
|
{ name: t('home'), icon: FiHome, path: '/home', enabled: true },
|
|
{ name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true },
|
|
]
|
|
|
|
const docItems = [
|
|
{ name: t('announcement'), icon: '', path: '', enabled: true },
|
|
{ name: t('faq'), icon: '', path: '', enabled: true },
|
|
{ name: t('tutorial'), icon: '', path: '', enabled: true },
|
|
]
|
|
|
|
return (
|
|
<Box
|
|
transition="3s ease"
|
|
bg={bg}
|
|
// borderRight="1px"
|
|
// borderRightColor={colorBorderRight}
|
|
w={{ base: 'full', md: 60 }}
|
|
pos="fixed"
|
|
h="full"
|
|
{...rest}>
|
|
|
|
<Flex h="20"
|
|
alignItems="center"
|
|
mx="8"
|
|
justifyContent="space-between"
|
|
>
|
|
<Logo />
|
|
|
|
<ColorModeSwitcher
|
|
display={{ base: 'flex', md: 'none' }}
|
|
/>
|
|
|
|
<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
|
|
</Flex>
|
|
|
|
<Flex h="90%" direction="column" justifyContent="space-between">
|
|
<Box>
|
|
<Stack
|
|
display={{ base: 'flex', md: 'none' }}
|
|
w="30"
|
|
mx="8"
|
|
my="4"
|
|
>
|
|
<Lang config={supportedLangs} />
|
|
</Stack>
|
|
|
|
{/* nav links */}
|
|
{
|
|
menuItems.map((item) => (
|
|
item.enabled && <NavItem key={item.name} icon={item.icon} onClick={onClose} path={item.path}>
|
|
{item.name}
|
|
</NavItem>
|
|
))
|
|
}
|
|
</Box>
|
|
|
|
<Box>
|
|
{/* document links */}
|
|
{
|
|
docItems.map((item) => (
|
|
item.enabled && <DocItem key={item.name} icon={item.icon} path={item.path}>
|
|
{item.name}
|
|
</DocItem>
|
|
))
|
|
}
|
|
{/* social icons */}
|
|
<Flex
|
|
px="8"
|
|
my="8"
|
|
fontSize="18"
|
|
color="gray.400"
|
|
|
|
justifyContent="space-between"
|
|
>
|
|
{
|
|
app.socials.map((item) => (
|
|
item.enabled && <SocialItem key={item.name} icon={item.icon} path={item.path} />
|
|
))
|
|
}
|
|
</Flex>
|
|
</Box>
|
|
</Flex>
|
|
</Box>
|
|
)
|
|
} |