163 lines
3.9 KiB
JavaScript
163 lines
3.9 KiB
JavaScript
import React, { useState } 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 BuildIcon from "@material-ui/icons/Build";
|
|
import DnsIcon from "@material-ui/icons/Dns";
|
|
import DeviceHubIcon from "@material-ui/icons/DeviceHub";
|
|
import SettingsIcon from "@material-ui/icons/Settings";
|
|
import DashboardIcon from "@material-ui/icons/Dashboard";
|
|
import FeaturedPlayListIcon from "@material-ui/icons/FeaturedPlayList";
|
|
import { useHistory } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import styles from "./styles";
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const menu = [
|
|
{
|
|
order: 0,
|
|
items: [
|
|
{
|
|
code: "dashboard",
|
|
name: "Menu.Dashboard",
|
|
route: "/dashboard",
|
|
icon: <DashboardIcon />,
|
|
order: 0
|
|
},
|
|
{
|
|
code: "machines",
|
|
name: "Menu.Machines",
|
|
route: "/machines",
|
|
icon: <DnsIcon />,
|
|
order: 1
|
|
},
|
|
{
|
|
code: "system",
|
|
name: "Menu.System",
|
|
route: "/system",
|
|
icon: <DeviceHubIcon />,
|
|
order: 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
order: 1,
|
|
items: [
|
|
{
|
|
code: "administration",
|
|
name: "Menu.Administration",
|
|
route: "/administration",
|
|
icon: <BuildIcon />,
|
|
order: 0
|
|
},
|
|
{
|
|
code: "settings",
|
|
name: "Menu.Settings",
|
|
route: "/settings",
|
|
icon: <SettingsIcon />,
|
|
order: 1
|
|
}
|
|
]
|
|
},
|
|
{
|
|
order: 2,
|
|
items: [
|
|
{
|
|
code: "about",
|
|
name: "Menu.About",
|
|
route: "/about",
|
|
icon: <FeaturedPlayListIcon />,
|
|
order: 0
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
const sortedMenu = menu.sort((i1, i2) => i1 - i2);
|
|
|
|
const Sidebar = ({ open, handleDrawerClose }) => {
|
|
const [selected, setSelected] = useState(null);
|
|
|
|
const classes = useStyles();
|
|
const theme = useTheme();
|
|
const history = useHistory();
|
|
const { t } = useTranslation();
|
|
|
|
const handleClick = route => () => {
|
|
setSelected(route);
|
|
history.push(route);
|
|
};
|
|
|
|
const isSelected = key => selected === key;
|
|
|
|
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 />
|
|
|
|
{sortedMenu.map((menu, index) => {
|
|
const isLast = index === sortedMenu.length - 1;
|
|
return (
|
|
<React.Fragment key={`menu-${menu.order}`}>
|
|
<List>
|
|
{menu.items
|
|
.sort((i1, i2) => i1 - i2)
|
|
.map(item => (
|
|
<ListItem
|
|
button
|
|
key={item.code}
|
|
onClick={handleClick(item.route)}
|
|
selected={isSelected(item.route)}
|
|
>
|
|
<ListItemIcon>{item.icon}</ListItemIcon>
|
|
<ListItemText primary={t(item.name)} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
{!isLast && <Divider />}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
Sidebar.propTypes = {
|
|
open: PropTypes.bool.isRequired,
|
|
handleDrawerClose: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default Sidebar;
|