99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import Icon from '../Icon';
|
|
import {
|
|
Flex,
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerFooter,
|
|
DrawerOverlay,
|
|
DrawerContent,
|
|
Box,
|
|
useDisclosure,
|
|
Button,
|
|
Image
|
|
} from '@chakra-ui/react';
|
|
|
|
const NavbarPhone = ({
|
|
navbarList
|
|
}: {
|
|
navbarList: {
|
|
label: string;
|
|
icon: string;
|
|
link: string;
|
|
activeLink: string[];
|
|
}[];
|
|
}) => {
|
|
const router = useRouter();
|
|
|
|
const { isOpen, onClose, onOpen } = useDisclosure();
|
|
|
|
return (
|
|
<>
|
|
<Flex
|
|
alignItems={'center'}
|
|
h={'100%'}
|
|
justifyContent={'space-between'}
|
|
backgroundColor={'white'}
|
|
position={'relative'}
|
|
px={7}
|
|
>
|
|
<Box onClick={onOpen}>
|
|
<Icon name="icon-caidan" width={20} height={20}></Icon>
|
|
</Box>
|
|
{/* <Icon name="icon-tongzhi" width={20} height={20}></Icon> */}
|
|
</Flex>
|
|
<Drawer isOpen={isOpen} placement="left" size={'xs'} onClose={onClose}>
|
|
<DrawerOverlay />
|
|
<DrawerContent maxWidth={'50vw'}>
|
|
<DrawerBody p={4}>
|
|
<Box py={4}>
|
|
<Image src={'/icon/logo.png'} margin={'auto'} w={'35'} h={'35'} alt=""></Image>
|
|
</Box>
|
|
{navbarList.map((item) => (
|
|
<Flex
|
|
key={item.label}
|
|
mb={5}
|
|
alignItems={'center'}
|
|
justifyContent={'center'}
|
|
onClick={() => {
|
|
router.push(item.link);
|
|
onClose();
|
|
}}
|
|
cursor={'pointer'}
|
|
h={'60px'}
|
|
borderRadius={'md'}
|
|
{...(item.activeLink.includes(router.pathname)
|
|
? {
|
|
color: '#2B6CB0',
|
|
backgroundColor: '#BEE3F8'
|
|
}
|
|
: {
|
|
color: '#4A5568',
|
|
backgroundColor: 'transparent'
|
|
})}
|
|
>
|
|
<Icon
|
|
name={item.icon}
|
|
width={24}
|
|
height={24}
|
|
color={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
|
|
/>
|
|
<Box ml={5}>{item.label}</Box>
|
|
</Flex>
|
|
))}
|
|
</DrawerBody>
|
|
|
|
<DrawerFooter px={2}>
|
|
<Button variant="outline" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavbarPhone;
|