ReactJS add Sidebar

App.js

import React, {Component} from 'react';
import './App.css';
import SideDrawer from "./components/Sidedrawer/side_drawer";

class App extends Component {
    state = {
        sideDrawerOpen: false
    };

    drawerToggleClickHandler = () => {
        this.setState((prevState) => {
            return {sideDrawerOpen: !prevState.sideDrawerOpen}
        })
    };

    backdropClickHandler = () => {
        this.setState({sideDrawerOpen: false});
    };

    render() {

        let backDrop;

        if (this.state.sideDrawerOpen) {
            backDrop = <div className="backdrop" onClick={this.backdropClickHandler}/>;
        }

        return (
            <div className="App" style={{height: '100%'}}>
                  <header className="toolbar">
                    <nav className="toolbar__navigation">
                        <div>
                            <button className="toggle_button" onClick={this.drawerToggleClickHandler}>
                                <img src={require('../../assets/images/menu.svg')} alt="hamburger-icon"
                                     className="side-menu-toggle"/>
                            </button>
                        </div>
                        <div className="toolbar__logo"><a href="/">THE LOGO</a></div>
                        <div className="spacer"/>
                        <div className="toolbar_navigation-items">
                            <ul>
                                <li><a href="/">Users</a></li>
                                <li><a href="/">Products</a></li>
                            </ul>
                        </div>
                    </nav>
                </header>
                
                <SideDrawer show={this.state.sideDrawerOpen}/>
                {backDrop}

                <main style={{marginTop: '64px'}}>
                    This is the page content
                </main>
            </div>
        );
    }
}

export default App;

side_drawer.js

import React from 'react';

const SideDrawer = props => {
    let classes = 'side-drawer';

    if(props.show){
        classes = classes + ' open';
    }
    return (
        <nav className={classes}>
            <ul>
                <li><a href="/">Products</a></li>
                <li><a href="/">Users</a></li>
            </ul>

        </nav>
    );
};

export default SideDrawer;

sidebar.css

html{
    height : 100%;
}

body {
    height : 100%;
}

.toolbar {
    width: 100%;
    position: fixed;
    background-color: skyblue;
    top: 0;
    left: 0;
    height: 56px;
}

.side-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 70%;
    max-width: 400px;
    background: white;
    box-shadow: 1px 0 7px rgba(0, 0, 0, .5);
    z-index: 200;

    transform: translateX(-110%);
    -webkit-transition: transform .5s ease-out;
    -moz-transition: transform .5s ease-out;
    -ms-transition: transform .5s ease-out;
    -o-transition: transform .5s ease-out;
    transition: transform .5s ease-out;
}

.side-drawer.open {
    transform: translateX(0);
}

.backdrop {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
}

@media (max-width: 768px) {
    .toolbar_navigation-items {
        display: none;
    }
}

@media (min-width: 769px) {
    .side-drawer {
        display: none;
    }

    .side-menu-toggle{
       display: none;
    }
}