computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.2 KiB
55 lines
1.2 KiB
3 years ago
|
import { Box, CloseButton } from '@chakra-ui/react';
|
||
|
import { RemoveScroll } from 'react-remove-scroll';
|
||
|
import { RoadmapType } from '../../lib/roadmap';
|
||
|
import RoadmapGroup from '../../pages/[roadmap]/[group]';
|
||
|
|
||
|
type ContentDrawerProps = {
|
||
|
roadmap: RoadmapType;
|
||
|
groupId: string;
|
||
|
onClose?: () => void;
|
||
|
};
|
||
|
|
||
|
export function ContentDrawer(props: ContentDrawerProps) {
|
||
|
const { roadmap, groupId, onClose = () => null } = props;
|
||
|
if (!groupId) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<Box zIndex={999} pos="relative">
|
||
|
<Box
|
||
|
onClick={onClose}
|
||
|
pos="fixed"
|
||
|
top={0}
|
||
|
left={0}
|
||
|
right={0}
|
||
|
bottom={0}
|
||
|
bg="black"
|
||
|
opacity={0.4}
|
||
|
/>
|
||
|
<RemoveScroll>
|
||
|
<Box
|
||
|
p="0px 30px 30px"
|
||
|
position="fixed"
|
||
|
w={['100%', '70%', '40%']}
|
||
|
bg="white"
|
||
|
top={0}
|
||
|
right={0}
|
||
|
bottom={0}
|
||
|
borderLeftWidth={'1px'}
|
||
|
overflowY="scroll"
|
||
|
>
|
||
|
<CloseButton
|
||
|
onClick={onClose}
|
||
|
pos="absolute"
|
||
|
top={'20px'}
|
||
|
right={'20px'}
|
||
|
zIndex={1}
|
||
|
/>
|
||
|
<RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
|
||
|
</Box>
|
||
|
</RemoveScroll>
|
||
|
</Box>
|
||
|
);
|
||
|
}
|