Responsive Material-UI drawer with React-Router-Dom

When building React applications I notice that for styling I tend to use two main frameworks. Materail-UI and React-Bootstrap. React-Bootstrap is would be the most recognizable of the two but I tend to default to Material-UI. So, that’s what we’ll be using today. Also, we’ll need a way to navigate to the different pages of our application and that’s where react-router-dom comes in.
React-router-dom is a way to dynamically route between different pages.

To get things setup we first need to create our application, I like to use create-react-app to build my applications. Create React App “is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

npx create-react-app my-app
cd my-app
npm start

Check out what we will be building today.

Side navbar that allows you to navigate to different pages

Next we need to install the dependencies needed to create our app.

npm i @material-ui/core @material-ui/icons react-router-dom

After the dependencies are finished installing you’ll want to clean up your App.js file a bit so you can have a simple React app.

import React from 'react';

function App() {
  return(
    <div>
    </div>
  );
}
export default App;

Then you’ll want to import some of the Material-UI components:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles;
const useStyles = makeStyles((theme)) => ({
  drawerPaper: { width: 'inherit' }
}));
function App() {
 const classes = useStyles();
 return(
    <div>
    </div>
  ); 
}
export default App;

After that you’ll want to add import some react-router-dom components:

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

Now, lets create our navbar.

To handle routing, you’ll want to wrap your return statement in the Router component. I also added some styling to the drawer.

return(
  <Router>
    <div style={{ display: 'flex'}}>
      <Drawer 
        style={{ width: '200px' }}
        variant='persistent'
        anchor='left'
        open={true}
        classes={{ paper: classes.drawerPaper }}
      >
</Drawer>
    </div>
  </Router>

Since we created our drawer, lets put some things inside of it! I chose my icons from material-ui/icons, this is a really good resource for adding icons to a web application.

import { Drawer, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
...
</Drawer>
  <List>
    <ListItem button>
      <ListItemIcon> 
        <HomeIcon/>
      </ListItemIcon>
      <ListItemText primary={"Home"} />

In order to route to the desired page we need to wrap our ListItem in a Link element so that when we click on the home link it redirects to the home page

const useStyles = makeStyles((theme)) => ({
  drawerPaper: { width: 'inherit' },
  link: { 
    textDecoration: 'none', 
    color: theme.palette.text.primary 
  }
}));
<List> 
  <Link to='/' className={classes.link} >
   <ListItem button>
      <ListItemIcon> 
        <HomeIcon/>
      </ListItemIcon>
      <ListItemText primary={"Home"} /> 
   </ListItem> 
  </Link>
</List>

To create links to other pages, simply repeat the process..

import InfoIcon from '@material-ui/icons/Info';
...
  <List> 
    <Link to='/' className={classes.link} >
     <ListItem button>
        <ListItemIcon> 
          <HomeIcon/>
        </ListItemIcon>
        <ListItemText primary={"Home"} /> 
     </ListItem> 
    </Link>
    <Link to='/about' className={classes.link} >
      <ListItem button>
        <ListItemIcon> 
          <HomeIcon/>
        </ListItemIcon>
      <ListItemText primary={"About"} /> 
    </ListItem> 
   </Link>
  </List>

Now lets use react-router-dom to show different content based on which page we are on and we’ll use the Switch component to render one route at a time.

...
      </Drawer>
        <Switch>
          <Route exact path='/'>
            Home
          </Route>
          <Route exact path='/about'>
            About
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
export default App;

That’s it!

Now this is just a bare bones example of how to create a navigation drawer using Material-UI and React-router-dom. Depending on what you want your application to render, there are a lot of ways to customize your components. I just wanted to make a simple barebones app to get the process started and hopefully help someone along the way.

Cheers!