Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { ChevronUpIcon } from "@chakra-ui/icons";
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerOverlay,
DrawerHeader,
DrawerContent,
DrawerCloseButton,
Flex,
useDisclosure,
Portal,
} from "@chakra-ui/react";
import { FunctionComponent, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { ChooseSubmodule } from "./ChooseSubmodule";
import { usePackageState } from "./PackageState";
import { NavTree } from "../../components/NavTree";
export const NavDrawer: FunctionComponent = () => {
const { assembly, menuItems } = usePackageState();
const drawer = useDisclosure();
const location = useLocation();
const hasSubmodules = Object.keys(assembly.data?.submodules ?? {}).length > 0;
// Close NavDrawer when URL updates
useEffect(() => {
if (drawer.isOpen) {
drawer.onClose();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location]);
return (
<Box bottom={0} display={{ lg: "none" }} left={0} pos="fixed" right={0}>
<Button
bg="bgPrimary"
borderTop="base"
boxShadow="base"
fontSize="xl"
fontWeight="semibold"
h="3.5rem"
onClick={drawer.onOpen}
variant="unstyled"
w="full"
>
<Flex align="center" justify="space-between" px={6}>
Table of contents
<ChevronUpIcon />
</Flex>
</Button>
<Portal>
<Drawer {...drawer} blockScrollOnMount={false} placement="bottom">
<DrawerOverlay />
<DrawerContent maxH="60vh">
<DrawerHeader>Table of contents</DrawerHeader>
<DrawerCloseButton />
<DrawerBody>
{hasSubmodules && (
<Box mb={4} sx={{ button: { justifyContent: "initial" } }}>
<ChooseSubmodule />
</Box>
)}
<NavTree items={menuItems} />
</DrawerBody>
</DrawerContent>
</Drawer>
</Portal>
</Box>
);
};
|