How do you style a component to be under another component? - reactjs

Question

I'm setting up a small webapp using React and Material-UI, and I can't figure out how to make my drawer component fit under my app bar. Using the react developer tools I can see in the console that my components are picking up the classNames, but no matter what I do my styles aren't being applied to them. Currently, the drawer is clipping through the app bar at the top of the screen, taking up the entire height of the page instead of fitting under the app bar. What do I need to change in order to make my "Sidebar" component fit under my "Navbar" component? One of the reasons why I created these two as separate components is because I'm planning on adding more functionality to them later. Thank you.
I've been following the "clipped under the app bar" component demo at https://material-ui.com/components/drawers/ and I've also referenced Material UI Drawer won't move under Appbar
Here's a snippet of my code
My main app
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
const useStyles = makeStyles(theme => ({
App: {
display: 'flex',
},
navbar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: 240,
flexShrink: 0,
},
toolbar: theme.mixins.toolbar,
}));
function App() {
const classes = useStyles();
return (
<div className="App">
<CssBaseline/>
<Navbar position="fixed" className={classes.navbar}></Navbar>
<Sidebar className={classes.drawer}></Sidebar>
</div>
);
}
export default App;
My Navbar component
import React from 'react';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
function Navbar() {
return (
<AppBar positon="static">
<Toolbar>
<h2>Earthquake Mapper</h2>
</Toolbar>
</AppBar>
);
}
export default Navbar;
My Sidebar component
import React from 'react';
import Drawer from '#material-ui/core/Drawer';
function Sidebar() {
return (
<Drawer variant="permanent">
<div>
<ul>
<li>This</li>
<li>Will</li>
<li>Be</li>
<li>Where</li>
<li>Our</li>
<li>Data</li>
<li>Go</li>
</ul>
</div>
</Drawer>
);
}
export default Sidebar;

Answer 1

First, set the AppBar position as "fixed".
The way that Material-UI solves this is by adding an empty div with equal height to the Toolbar (which you put as the first child inside the AppBar component so your header min-height is equal to the Toolbar height) as the first child of the Drawer component.
This height is 64px by default, but you should get this value from theme.mixins.toolbar. You can see this in action in this tutorial.
So you'll end up doing something like this:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar,
}));
function Sidebar() {
const classes = useStyles();
return (
<Drawer variant="permanent">
<div className={classes.toolbar} />
<div>
<ul>
<li>This</li>
<li>Will</li>
<li>Be</li>
<li>Where</li>
<li>Our</li>
<li>Data</li>
<li>Go</li>
</ul>
</div>
</Drawer>
);
}
export default Sidebar;
Check out themes for more information on how to use theme providers and custom
theme configuration.

Answer 2

An alternative is to place an empty <Toolbar /> in the Drawer to fill the space.
import React from 'react';
import Drawer from '#material-ui/core/Drawer';
import Toolbar from '#material-ui/core/Toolbar';
function Sidebar() {
return (
<Drawer variant="permanent">
<Toolbar />
<div>
<ul>
<li>This</li>
<li>Will</li>
<li>Be</li>
<li>Where</li>
<li>Our</li>
<li>Data</li>
<li>Go</li>
</ul>
</div>
</Drawer>
);
}
export default Sidebar;