mui-drawer

This demo displays the same concept as mui-menu except the navigation is a function of drawers instead of menus.

The Material-UI docs give an example of using a Drawer to navigate to different parts of the documentation. The AppDrawer code uses Next.js Link for its routing. This demo shows how to use react-router for its routing instead of Next.js.

There are two principal navigation options in Material Design; drawers and menus. The software for the AppDrawer is located inside Material-UI docs and is not part of a released NPM repo (yet). Therefore, I have broken out the drawer code into this demo to show how to use it standalone in the context of Create React App instead of Next.js which is how it is currently implemented. The key minor change or refactor is to use React Router instead of Next.js for the routing.

If you look at the Material-UI docs the main piece of Navigational software is the AppDrawer which is derived from Drawer.

This section is about refactoring AppDrawer from Next.js to Create-React-App

This section will outline the details of how to transform the Material-UI Docs from Next.js to Create-React-App through a simple code example.

The AppDrawer Details

If you take a look at the Material-UI docs and open the drawer you will notice that all of the content inside the drawer is defined by an an object called pages which is located inside the file withRoot.

Inside this file are two other important functions.

• findActivePage
• getChildContext

These 3 pieces of code are ported over to their own file in the sample code called Drawer

This code is the basis for the refactor.

The AppDrawer Code

This is a demo that allows you to navigate inside the drawer and show an example delineating a Chapter in a book and a Section inside of the chapter.

Along with the pages object and the two functions mentioned above this code is the other piece of logic located inside the file Drawer that completes the refactor.

const ShowChapterSection = ({ match }) => (
  <div>
    <h3>Chapter: {match.params.ch}</h3>
    <h4>Section: {match.params.sec}</h4>
  </div>
);

More Details

In order to transform the Drawer from Next-js to React-Router one must remove references to the Next-js Link inside the AppDrawerNavItem and replace it with the React-Router Link.

For the details on how to refactor the code from Next.js to Create React App review code.md for more details on how to refactor the Material-UI code.