139 lines
3.5 KiB
JavaScript
139 lines
3.5 KiB
JavaScript
//
|
|
// Copyright 2020 DXOS.org
|
|
//
|
|
|
|
import clsx from "clsx";
|
|
import React from "react";
|
|
import { useHistory, useParams } from "react-router";
|
|
// import { useQuery } from '@apollo/react-hooks';
|
|
|
|
import { makeStyles } from "@material-ui/core";
|
|
import List from "@material-ui/core/List";
|
|
import ListItem from "@material-ui/core/ListItem";
|
|
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
|
import LinkIcon from "@material-ui/icons/ExitToApp";
|
|
import ListItemText from "@material-ui/core/ListItemText";
|
|
|
|
// import EXTENSIONS from '../gql/extensions.graphql';
|
|
// import { useQueryStatusReducer } from '../hooks';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: "flex",
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
},
|
|
|
|
list: {
|
|
padding: 0,
|
|
},
|
|
|
|
listItem: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
backgroundColor: theme.palette.background.default,
|
|
},
|
|
|
|
selected: {
|
|
backgroundColor: theme.palette.background.secondary,
|
|
},
|
|
|
|
itemText: {
|
|
fontFamily: '"DM Mono", monospace',
|
|
fontWeight: 400,
|
|
},
|
|
|
|
icon: {
|
|
minWidth: 40,
|
|
color: theme.palette.grey[500],
|
|
},
|
|
|
|
selected: {
|
|
color: theme.palette.text.primary,
|
|
},
|
|
|
|
expand: {
|
|
flex: 1,
|
|
},
|
|
}));
|
|
|
|
const Sidebar = ({ modules: { services, settings } }) => {
|
|
const classes = useStyles();
|
|
const history = useHistory();
|
|
const { module } = useParams();
|
|
|
|
// const { data: extensionsData } = useQueryStatusReducer(useQuery(EXTENSIONS));
|
|
// const extensions = extensionsData ? JSON.parse(extensionsData.extensions.json) : [];
|
|
const extensions = [];
|
|
|
|
const isSelected = (path) => path === `/${module}`;
|
|
|
|
const Modules = ({ modules }) => (
|
|
<List aria-label="items" className={classes.list}>
|
|
{modules.map(({ path, title, icon: Icon }) => (
|
|
<ListItem
|
|
button
|
|
selected={isSelected(path)}
|
|
key={path}
|
|
onClick={() => history.push(path)}
|
|
classes={{ root: classes.listItem, selected: classes.selected }}
|
|
>
|
|
<ListItemIcon classes={{ root: classes.icon }}>
|
|
<Icon
|
|
className={clsx(
|
|
classes.icon,
|
|
isSelected(path) && classes.selected,
|
|
)}
|
|
/>
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={title.toUpperCase()}
|
|
classes={{ primary: classes.itemText }}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
);
|
|
|
|
const Extensions = ({ extensions }) => (
|
|
<List aria-label="items" className={classes.list}>
|
|
{extensions.map(({ url, title }) => {
|
|
url = url
|
|
.replace("%HOST%", window.location.host)
|
|
.replace("%PORT%", window.location.port)
|
|
.replace("%PROTOCOL%", window.location.protocol);
|
|
return (
|
|
<ListItem
|
|
button
|
|
key={url}
|
|
onClick={() => {
|
|
window.location = url;
|
|
return true;
|
|
}}
|
|
>
|
|
<ListItemIcon classes={{ root: classes.icon }}>
|
|
<LinkIcon className={clsx(classes.icon)} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={title.toUpperCase()}
|
|
classes={{ primary: classes.itemText }}
|
|
/>
|
|
</ListItem>
|
|
);
|
|
})}
|
|
</List>
|
|
);
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Modules modules={services} />
|
|
<Extensions extensions={extensions} />
|
|
<div className={classes.expand} />
|
|
<Modules modules={settings} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|