92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
import {
|
|
mdiChip,
|
|
mdiCog,
|
|
mdiElectricSwitch,
|
|
mdiHome,
|
|
mdiMonitorArrowDown,
|
|
mdiNewBox,
|
|
mdiNotebookMultiple,
|
|
} from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import {
|
|
List,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { useLocation } from "react-router-dom";
|
|
import { RouterLink } from "./RouterLink";
|
|
import { ServerApi } from "../api/ServerApi";
|
|
|
|
export function SolarEnergyNavList(): React.ReactElement {
|
|
return (
|
|
<List
|
|
dense
|
|
component="nav"
|
|
sx={{
|
|
minWidth: "200px",
|
|
backgroundColor: "background.paper",
|
|
}}
|
|
>
|
|
<NavLink label="Home" uri="/" icon={<Icon path={mdiHome} size={1} />} />
|
|
<NavLink
|
|
label="Devices"
|
|
uri="/devices"
|
|
icon={<Icon path={mdiChip} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Pending devices"
|
|
uri="/pending_devices"
|
|
icon={<Icon path={mdiNewBox} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Relays"
|
|
uri="/relays"
|
|
icon={<Icon path={mdiElectricSwitch} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="OTA"
|
|
uri="/ota"
|
|
icon={<Icon path={mdiMonitorArrowDown} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Logging"
|
|
uri="/logs"
|
|
icon={<Icon path={mdiNotebookMultiple} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Management"
|
|
uri="/management"
|
|
icon={<Icon path={mdiCog} size={1} />}
|
|
/>
|
|
<Typography
|
|
variant="caption"
|
|
component="div"
|
|
style={{ textAlign: "center", width: "100%", marginTop: "30px" }}
|
|
>
|
|
Version {ServerApi.Config.backend_version}
|
|
</Typography>
|
|
</List>
|
|
);
|
|
}
|
|
|
|
function NavLink(
|
|
p: Readonly<{
|
|
icon: React.ReactElement;
|
|
uri: string;
|
|
label: string;
|
|
secondaryAction?: React.ReactElement;
|
|
}>
|
|
): React.ReactElement {
|
|
const location = useLocation();
|
|
return (
|
|
<RouterLink to={p.uri}>
|
|
<ListItemButton selected={p.uri === location.pathname}>
|
|
<ListItemIcon>{p.icon}</ListItemIcon>
|
|
<ListItemText primary={p.label} />
|
|
</ListItemButton>
|
|
</RouterLink>
|
|
);
|
|
}
|