blob: fb2d5afe0a246ae99acb08c8cb4daa26f63ed887 (
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
|
import { useState } from 'react'
import PropTypes from 'prop-types'
import { AppBar, IconButton, Toolbar } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import MenuIcon from '@material-ui/icons/Menu'
import LayoutSidebar from './LayoutSidebar'
const useStyles = makeStyles((theme) => ({
appBar: {
borderBottom: `1px solid ${theme.palette.divider}`,
zIndex: theme.zIndex.drawer + 1
},
menuButton: {
marginRight: theme.spacing(1),
padding: theme.spacing(1),
[theme.breakpoints.up('md')]: {
display: 'none'
}
}
}))
// Common layout for Dashboard and Schematic Editor
function Layout ({ header, resToolbar, sidebar }) {
const classes = useStyles()
const [mobileOpen, setMobileOpen] = useState(false)
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen)
}
return (
<>
{/* Header and Toolbar of layout */}
<AppBar
position='fixed'
color='default'
elevation={0}
className={classes.appBar}
>
{header}
<Toolbar variant='dense' color='default'>
<IconButton
color='inherit'
aria-label='open drawer'
edge='start'
size='small'
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon fontSize='small' />
</IconButton>
{resToolbar}
</Toolbar>
</AppBar>
{/* Left Sidebar for Layout */}
<LayoutSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle}>
{sidebar}
</LayoutSidebar>
</>
)
}
Layout.propTypes = {
header: PropTypes.element,
resToolbar: PropTypes.element,
sidebar: PropTypes.element
}
export default Layout
|
