Updated menu component to permanently display the selected item.

master
Tudor Stanciu 2023-05-07 01:58:36 +03:00
parent 31ba727f9b
commit 8805ca469e
2 changed files with 96 additions and 62 deletions

View File

@ -6,7 +6,6 @@ Theming:
https://v4.mui.com/customization/palette/ (Dark theme)
Add in settings:
- reset cache
- ping interval
- notifications
- test notification mechanism

View File

@ -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 />
<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>
<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")} />
</ListItem>
</List>
{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>
);
};