63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
// @flow
|
|
import * as React from "react";
|
|
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import Drawer from "@material-ui/core/Drawer";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import AppBar from "@material-ui/core/AppBar";
|
|
import Toolbar from "@material-ui/core/Toolbar";
|
|
import List from "@material-ui/core/List";
|
|
import ReactIcon from "@mdi/react";
|
|
import { mdiClose } from "@mdi/js";
|
|
|
|
import type { Control } from "config/flowtypes";
|
|
|
|
export type SideBarProps = {
|
|
control: ?Control,
|
|
open: boolean,
|
|
onCloseRequest: () => void,
|
|
icon?: ?React.Node,
|
|
children?: React.Node
|
|
};
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
drawerPaper: {
|
|
width: 340
|
|
},
|
|
title: {
|
|
flex: 1,
|
|
marginLeft: theme.spacing(1)
|
|
}
|
|
}));
|
|
|
|
const SideBar = (props: SideBarProps) => {
|
|
const classes = useStyles();
|
|
return (
|
|
<Drawer open={props.open}
|
|
anchor="right"
|
|
onClose={props.onCloseRequest}
|
|
classes={{paper: classes.drawerPaper}}
|
|
variant="persistent"
|
|
>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<span>
|
|
{props.icon == null || props.icon}
|
|
</span>
|
|
<Typography variant="subtitle1" className={classes.title}>
|
|
{props.control == null ? "" : props.control.name}
|
|
</Typography>
|
|
<IconButton onClick={props.onCloseRequest}>
|
|
<ReactIcon path={mdiClose} size={1.5} />
|
|
</IconButton>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<List id="drawer_uiComponents">
|
|
<React.Fragment>{props.children}</React.Fragment>
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|