Updated menu component to permanently display the selected item.
parent
31ba727f9b
commit
8805ca469e
|
@ -6,7 +6,6 @@ Theming:
|
|||
https://v4.mui.com/customization/palette/ (Dark theme)
|
||||
|
||||
Add in settings:
|
||||
- reset cache
|
||||
- ping interval
|
||||
- notifications
|
||||
- test notification mechanism
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import clsx from "clsx";
|
||||
import { makeStyles, useTheme } from "@material-ui/core/styles";
|
||||
|
@ -25,12 +25,83 @@ 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"
|
||||
|
@ -55,66 +126,30 @@ const Sidebar = ({ open, handleDrawerClose }) => {
|
|||
</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="dashboard"
|
||||
onClick={() => history.push("/dashboard")}
|
||||
key={item.code}
|
||||
onClick={handleClick(item.route)}
|
||||
selected={isSelected(item.route)}
|
||||
>
|
||||
<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>
|
||||
<ListItem button key="system" onClick={() => history.push("/system")}>
|
||||
<ListItemIcon>
|
||||
<DeviceHubIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t("Menu.System")} />
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem
|
||||
button
|
||||
key="administration"
|
||||
onClick={() => history.push("/administration")}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<BuildIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t("Menu.Administration")} />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key="settings"
|
||||
onClick={() => history.push("/settings")}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t("Menu.Settings")} />
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key="about" onClick={() => history.push("/about")}>
|
||||
<ListItemIcon>
|
||||
<FeaturedPlayListIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t("Menu.About")} />
|
||||
<ListItemIcon>{item.icon}</ListItemIcon>
|
||||
<ListItemText primary={t(item.name)} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
{!isLast && <Divider />}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue