Currently, I am developing a React page using material-ui integrated within Electron. The main requirement is to have an AppBar containing Toolbar and Drawer components.
To achieve this, I have referred to the source code from https://material-ui.com/demos/drawers/. Everything seems to be working well, except for the alignment of the content on the page. Here is how I structured the react router within the main tag:
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Router>
<Switch>
<Route exact path='/' component={DeviceWithProps} />
<Route path='/Dashboard' component={() =>
<Dashboard />
} />
<Route path='/Quit' component={this._quit} />
<Route path='/Device' component={() => DeviceWithProps} />
<Route path='/Report' component={() => <Report />} />
<Route path='/Settings' component={Settings} />
<Route path='/About' component={() => <About version={currentVersion} />} />
<Route path='/Help' component={() => <Help />} />
<Route component={NotFound} />
</Switch>
</Router>
</main>
Accompanied by the following styles:
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
},
The issue at hand is that the content appears horizontally next to the AppBar/Toolbar instead of below it. I have been unable to determine the root cause of this misalignment. The current layout looks like this:
https://i.sstatic.net/czxt6.png
Any suggestions on what might be missing or how I can resolve this layout problem?