Properly pushing a Canvas with Material UI Persistent Drawers - css

Question

I have an application with two expandable toolbars. The left toolbar functions as intended, but I have not been able to make the right toolbar push the content properly. See the code below.
I copied the exact code from here - see Persistent Drawers: https://material-ui.com/demos/drawers/
The KeyboardListener is display:none and the SceneCanvas element has the following styling:
root: {
height: '100%',
width: '100%',
position: 'relative',
zIndex: 0,
lineHeight: 0,
cursor: 'crosshair',
}
The desired functionality is for both the left and right toolbars to push the content in and resize the canvas and the canvas content. And tips or insight would be greatly appreciated!
import React from 'react';
import classNames from 'classnames';
import { withStyles } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import MenuItem from '#material-ui/core/MenuItem';
import Typography from '#material-ui/core/Typography';
import TextField from '#material-ui/core/TextField';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import SceneCanvas from '../../three/SceneCanvas';
import KeyboardListener from '../KeyboardListener';
const drawerWidth = 240;
const styles = theme => ({
root: {
flexGrow: 1,
},
appFrame: {
height: 430,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex',
width: '100%',
},
appBar: {
position: 'absolute',
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
'appBarShift-left': {
marginLeft: drawerWidth,
},
'appBarShift-right': {
marginRight: drawerWidth,
},
menuButton: {
marginLeft: 12,
marginRight: 20,
},
hide: {
display: 'none',
},
drawerPaper: {
position: 'relative',
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
'content-left': {
marginLeft: -drawerWidth,
},
'content-right': {
marginRight: -drawerWidth,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
'contentShift-left': {
marginLeft: 0,
},
'contentShift-right': {
marginRight: 0,
},
});
class Header extends React.Component {
state = {
open: false,
anchor: 'left',
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
handleChangeAnchor = (event) => {
this.setState({
anchor: event.target.value,
});
};
render() {
const { classes, theme } = this.props;
const { anchor, open } = this.state;
const drawer = (
<Drawer
variant="persistent"
anchor={anchor}
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
<Divider />
<List>Testing</List>
<Divider />
<List>Testing</List>
</Drawer>
);
let before = null;
let after = null;
if (anchor === 'left') {
before = drawer;
} else {
after = drawer;
}
return (
<div className={classes.root}>
<TextField
id="persistent-anchor"
select
label="Anchor"
value={anchor}
onChange={this.handleChangeAnchor}
margin="normal"
>
<MenuItem value="left">left</MenuItem>
<MenuItem value="right">right</MenuItem>
</TextField>
<div className={classes.appFrame}>
<AppBar
className={classNames(classes.appBar, {
[classes.appBarShift]: open,
[classes[`appBarShift-${anchor}`]]: open,
})}
>
<Toolbar disableGutters={!open}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
{before}
<main
className={classNames(classes.content, classes[`content-${anchor}`], {
[classes.contentShift]: open,
[classes[`contentShift-${anchor}`]]: open,
})}
>
<div className={classes.drawerHeader} />
<KeyboardListener />
<SceneCanvas />
</main>
{after}
</div>
</div>
);
}
}
export default withStyles(styles, { withTheme: true })(Header);
Left Toolbar Functioning Properly
Right Toolbar Breaking
Desired Function