Toolbar abstraction

Toolbar code can get verbose if you have to render toolbars in several places. To address this, you can create your own Toolbar component that encapsulates the content patterns of toolbars, making it easier to render AppBar components in several places.

How to do it...

Let's assume that your app renders AppBar components on several screens. Each AppBar component also renders Menu and title to the left, as well as Button to the right. Here's how you can implement your own AppBar component so that it's easier to use on several screens:

import React, { Fragment, Component } from 'react';

import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material...