107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import clsx from "clsx";
|
|
import { makeStyles, useTheme } from "@material-ui/core/styles";
|
|
import {
|
|
Drawer,
|
|
List,
|
|
Divider,
|
|
IconButton,
|
|
ListItemIcon,
|
|
ListItemText
|
|
} from "@material-ui/core";
|
|
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
|
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
|
|
import ListItem from "@material-ui/core/ListItem";
|
|
import DeleteIcon from "@material-ui/icons/Delete";
|
|
import DnsIcon from "@material-ui/icons/Dns";
|
|
import SettingsIcon from "@material-ui/icons/Settings";
|
|
import DashboardIcon from "@material-ui/icons/Dashboard";
|
|
import { useHistory } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import styles from "./styles";
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const Sidebar = ({ open, handleDrawerClose }) => {
|
|
const classes = useStyles();
|
|
const theme = useTheme();
|
|
const history = useHistory();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Drawer
|
|
variant="permanent"
|
|
className={clsx(classes.drawer, {
|
|
[classes.drawerOpen]: open,
|
|
[classes.drawerClose]: !open
|
|
})}
|
|
classes={{
|
|
paper: clsx({
|
|
[classes.drawerOpen]: open,
|
|
[classes.drawerClose]: !open
|
|
})
|
|
}}
|
|
>
|
|
<div className={classes.toolbar}>
|
|
<IconButton onClick={handleDrawerClose}>
|
|
{theme.direction === "rtl" ? (
|
|
<ChevronRightIcon />
|
|
) : (
|
|
<ChevronLeftIcon />
|
|
)}
|
|
</IconButton>
|
|
</div>
|
|
<Divider />
|
|
<List>
|
|
<ListItem
|
|
button
|
|
key="dashboard"
|
|
onClick={() => history.push("/dashboard")}
|
|
>
|
|
<ListItemIcon>
|
|
<DashboardIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("Menu.Dashboard")} />
|
|
</ListItem>
|
|
<ListItem
|
|
button
|
|
key="machines"
|
|
onClick={() => history.push("/machines")}
|
|
>
|
|
<ListItemIcon>
|
|
<DnsIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("Menu.Machines")} />
|
|
</ListItem>
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
<ListItem button key="trash" onClick={() => history.push("/trash")}>
|
|
<ListItemIcon>
|
|
<DeleteIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("Menu.Trash")} />
|
|
</ListItem>
|
|
<ListItem
|
|
button
|
|
key="settings"
|
|
onClick={() => history.push("/settings")}
|
|
>
|
|
<ListItemIcon>
|
|
<SettingsIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("Menu.Settings")} />
|
|
</ListItem>
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
Sidebar.propTypes = {
|
|
open: PropTypes.bool.isRequired,
|
|
handleDrawerClose: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default Sidebar;
|