Updated menu component to permanently display the selected item.

private/Notes.txt

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

src/components/layout/Sidebar.js

@@ -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>
   );
 };