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) https://v4.mui.com/customization/palette/ (Dark theme)
Add in settings: Add in settings:
- reset cache
- ping interval - ping interval
- notifications - notifications
- test notification mechanism - test notification mechanism

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import clsx from "clsx"; import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles"; import { makeStyles, useTheme } from "@material-ui/core/styles";
@ -25,12 +25,83 @@ import styles from "./styles";
const useStyles = makeStyles(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 Sidebar = ({ open, handleDrawerClose }) => {
const [selected, setSelected] = useState(null);
const classes = useStyles(); const classes = useStyles();
const theme = useTheme(); const theme = useTheme();
const history = useHistory(); const history = useHistory();
const { t } = useTranslation(); const { t } = useTranslation();
const handleClick = route => () => {
setSelected(route);
history.push(route);
};
const isSelected = key => selected === key;
return ( return (
<Drawer <Drawer
variant="permanent" variant="permanent"
@ -55,66 +126,30 @@ const Sidebar = ({ open, handleDrawerClose }) => {
</IconButton> </IconButton>
</div> </div>
<Divider /> <Divider />
<List>
<ListItem {sortedMenu.map((menu, index) => {
button const isLast = index === sortedMenu.length - 1;
key="dashboard" return (
onClick={() => history.push("/dashboard")} <React.Fragment key={`menu-${menu.order}`}>
> <List>
<ListItemIcon> {menu.items
<DashboardIcon /> .sort((i1, i2) => i1 - i2)
</ListItemIcon> .map(item => (
<ListItemText primary={t("Menu.Dashboard")} /> <ListItem
</ListItem> button
<ListItem key={item.code}
button onClick={handleClick(item.route)}
key="machines" selected={isSelected(item.route)}
onClick={() => history.push("/machines")} >
> <ListItemIcon>{item.icon}</ListItemIcon>
<ListItemIcon> <ListItemText primary={t(item.name)} />
<DnsIcon /> </ListItem>
</ListItemIcon> ))}
<ListItemText primary={t("Menu.Machines")} /> </List>
</ListItem> {!isLast && <Divider />}
<ListItem button key="system" onClick={() => history.push("/system")}> </React.Fragment>
<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>
</Drawer> </Drawer>
); );
}; };