57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import React, { FC, Fragment } from "react";
|
|
import {
|
|
Button,
|
|
Link,
|
|
MenuDivider,
|
|
MenuItem,
|
|
MenuList
|
|
} from "@chakra-ui/react";
|
|
import navItems, { NavItem } from "./navItems";
|
|
|
|
interface MobileNavProps {
|
|
updateOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
|
|
return (
|
|
<MenuList
|
|
as="nav"
|
|
d={{ base: "block", lg: "none" }}
|
|
bg="brand.main"
|
|
h="auto"
|
|
w="100%"
|
|
p={0}
|
|
border="none"
|
|
boxShadow="none"
|
|
>
|
|
{navItems.map((navItem: NavItem, index: number) => {
|
|
return (
|
|
<MenuItem
|
|
id={"mobile-" + navItem[0]}
|
|
key={navItem[0]}
|
|
w="auto"
|
|
h="auto"
|
|
p={0}
|
|
_hover={{
|
|
backgroundColor: "none"
|
|
}}
|
|
_focus={{
|
|
backgroundColor: "none"
|
|
}}
|
|
>
|
|
<Link onClick={() => updateOpen(false)} href={navItem[1]}>
|
|
{index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
|
|
<Button w="100vw" variant={"nav"} p={0} m="auto">
|
|
{navItem[0]}
|
|
</Button>
|
|
<MenuDivider />
|
|
</Link>
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
</MenuList>
|
|
);
|
|
};
|
|
|
|
export default MobileNav;
|