53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
|
import React from 'react'
|
|
import Drawer from '@material-ui/core/Drawer'
|
|
import Button from '@material-ui/core/Button'
|
|
|
|
const drawerWidth = 240
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
display: 'flex'
|
|
},
|
|
drawer: {
|
|
width: drawerWidth,
|
|
flexShrink: 0
|
|
},
|
|
drawerPaper: {
|
|
padding: '4px',
|
|
width: drawerWidth,
|
|
background: `#111111`
|
|
},
|
|
drawerHeader: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '0 8px',
|
|
...theme.mixins.toolbar,
|
|
justifyContent: 'flex-start'
|
|
}
|
|
})
|
|
)
|
|
|
|
const Sidebar = () => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Drawer
|
|
className={classes.drawer}
|
|
variant="persistent"
|
|
anchor="right"
|
|
open={true}
|
|
classes={{
|
|
paper: classes.drawerPaper
|
|
}}
|
|
>
|
|
<Button variant={'contained'} color="primary">
|
|
New Simulation
|
|
</Button>
|
|
</Drawer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|