90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import React, { ReactElement } from "react";
|
|
import { createStyles, IconButton } from "@material-ui/core";
|
|
import { makeStyles, Theme } from "@material-ui/core/styles";
|
|
import Drawer from "@material-ui/core/Drawer";
|
|
import List from "@material-ui/core/List";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
|
import ListItem from "@material-ui/core/ListItem";
|
|
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
|
import ListItemText from "@material-ui/core/ListItemText";
|
|
import { makeVar, useReactiveVar } from "@apollo/client";
|
|
import { useHistory } from "react-router-dom";
|
|
|
|
export const mainMenuWidth = 240;
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
drawer: {
|
|
width: mainMenuWidth,
|
|
flexShrink: 0,
|
|
},
|
|
drawerPaper: {
|
|
width: mainMenuWidth,
|
|
},
|
|
drawerHeader: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: theme.spacing(0, 1),
|
|
// necessary for content to be below app bar
|
|
...theme.mixins.toolbar,
|
|
justifyContent: "flex-end",
|
|
},
|
|
})
|
|
);
|
|
|
|
export const mainMenuOpen = makeVar<boolean>(false);
|
|
|
|
export interface MenuOption {
|
|
title: string;
|
|
path: string;
|
|
icon: JSX.Element;
|
|
}
|
|
|
|
interface MainMenuProps {
|
|
options: Array<MenuOption>;
|
|
}
|
|
|
|
export function MainMenu(props: MainMenuProps): ReactElement {
|
|
const classes = useStyles();
|
|
const history = useHistory();
|
|
const open = useReactiveVar(mainMenuOpen);
|
|
|
|
const handleClose = () => {
|
|
mainMenuOpen(false);
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Drawer
|
|
className={classes.drawer}
|
|
variant="persistent"
|
|
anchor="left"
|
|
open={open}
|
|
classes={{
|
|
paper: classes.drawerPaper,
|
|
}}
|
|
>
|
|
<div className={classes.drawerHeader}>
|
|
<IconButton onClick={handleClose}>
|
|
<ChevronLeftIcon />
|
|
</IconButton>
|
|
</div>
|
|
<Divider />
|
|
<List>
|
|
{props.options.map((option) => (
|
|
<ListItem
|
|
button
|
|
key={option.title}
|
|
onClick={() => history.push(option.path)}
|
|
>
|
|
<ListItemIcon>{option.icon}</ListItemIcon>
|
|
<ListItemText primary={option.title} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Drawer>
|
|
</React.Fragment>
|
|
);
|
|
}
|