blob: 7120e6ff53d0a8bcd72e260023889f5a0856a41a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import PropTypes from 'prop-types'
import { Drawer, Hidden, IconButton } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import HighlightOffIcon from '@material-ui/icons/HighlightOff'
const drawerWidth = 250
const useStyles = makeStyles((theme) => ({
drawer: {
[theme.breakpoints.up('lg')]: {
width: drawerWidth,
flexShrink: 0
}
},
drawerPaper: {
width: drawerWidth
}
}))
// Editor right side pane to display grid and compProperties.
export default function RightSidebar ({ window, mobileOpen, mobileClose, children }) {
const classes = useStyles()
const container =
window !== undefined ? () => window().document.body : undefined
return (
<>
<nav className={classes.drawer} aria-label='mailbox folders'>
<Hidden xlUp implementation='css'>
<Drawer
container={container}
variant='temporary'
open={mobileOpen}
anchor='right'
onClose={mobileClose}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true // Better open performance on mobile.
}}
>
<IconButton
onClick={mobileClose}
color='inherit'
style={{ marginRight: '190px' }}
>
<HighlightOffIcon />
</IconButton>
{children}
</Drawer>
</Hidden>
<Hidden mdDown implementation='css'>
<Drawer
classes={{
paper: classes.drawerPaper
}}
anchor='right'
variant='permanent'
open
>
{children}
</Drawer>
</Hidden>
</nav>
</>
)
}
RightSidebar.propTypes = {
window: PropTypes.object,
mobileOpen: PropTypes.bool.isRequired,
mobileClose: PropTypes.func.isRequired,
children: PropTypes.element
}
|
