51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import NavLink from "@/components/NavLink";
|
|
import { Icon } from "@iconify/react";
|
|
import {
|
|
Box,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Toolbar,
|
|
} from "@mui/material";
|
|
|
|
const MenuOptions = [
|
|
{ text: "Game Report", icon: "streamline:magnifying-glass-solid", href: "/" },
|
|
{
|
|
text: "Game Database",
|
|
icon: "streamline:database-solid",
|
|
href: "/game-database",
|
|
},
|
|
];
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function NavMenu({ open, onClose }: Props) {
|
|
return (
|
|
<Drawer anchor="left" open={open} onClose={onClose}>
|
|
<Toolbar />
|
|
<Box sx={{ width: 250 }}>
|
|
<List>
|
|
{MenuOptions.map(({ text, icon, href }) => (
|
|
<ListItem key={text} disablePadding>
|
|
<NavLink href={href}>
|
|
<ListItemButton onClick={onClose}>
|
|
<ListItemIcon style={{ paddingLeft: "0.5em" }}>
|
|
<Icon icon={icon} height="1.5em" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</NavLink>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
);
|
|
}
|