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 77 78 79 | import {
Drawer,
DrawerBody,
DrawerOverlay,
DrawerHeader,
DrawerContent,
DrawerCloseButton,
Portal,
Stack,
} from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { HEADER_ANALYTICS } from "./constants";
import { MobileNavLinks } from "./MobileNavLinks";
import testIds from "./testIds";
import { Title } from "./Title";
import { GETTING_STARTED, DOCUMENTATION } from "../../constants/links";
import { ROUTES } from "../../constants/url";
import { NavLink } from "../NavLink";
export interface MobileNavProps {
isOpen: boolean;
onClose: () => void;
}
export const MobileNav: FunctionComponent<MobileNavProps> = ({
isOpen,
onClose,
}) => {
return (
<Portal>
<Drawer isOpen={isOpen} onClose={onClose} placement="left" size="xs">
<DrawerOverlay />
<DrawerContent data-testid={testIds.mobileNav}>
<DrawerCloseButton />
<DrawerHeader display="flex" justifyContent="start">
<Title />
</DrawerHeader>
<DrawerBody>
<Stack align="start" justify="start" spacing={0}>
<MobileNavLinks
sections={[
{
dataEvent: HEADER_ANALYTICS.GETTING_STARTED,
title: "Getting Started",
items: GETTING_STARTED,
testId: testIds.gettingStartedMenu,
},
{
dataEvent: HEADER_ANALYTICS.DOCUMENTATION,
title: "Documentation",
items: DOCUMENTATION,
testId: testIds.documentationMenu,
},
]}
/>
<NavLink
_hover={{ bg: "blackAlpha.50" }}
borderBottom="base"
color="textPrimary"
fontSize="1rem"
fontWeight="bold"
h="3.25rem"
lineHeight="3.25rem"
to={ROUTES.CONTRIBUTE}
w="full"
>
Contribute
</NavLink>
</Stack>
</DrawerBody>
</DrawerContent>
</Drawer>
</Portal>
);
};
|