component: add SideDrawer toogle button

src/components/Layout/Layout.js

@@ -7,17 +7,23 @@ import SideDrawer from '../Navigation/SideDrawer/SideDrawer';
 
 class Layout extends Component {
     state = {
-        showSideDrawer: true
+        showSideDrawer: false,
     }
 
     sideDrawerClosedHandler = () => {
         this.setState({showSideDrawer: false});
     }
 
+    sideDrawerToggleHandler = () => {
+        this.setState((prevState) => {
+            return {showSideDrawer: !prevState.showSideDrawer };
+        });
+    }
+
     render() {
         return (
             <Aux>
-                <Toolbar />
+                <Toolbar drawerToggleClicked={this.sideDrawerToggleHandler} />
                 <SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} />
                 <main className={classes.Content}>
                     {this.state.children}

src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+
+const drawerToggle = (props) => (
+    <div onClick={props.clicked}>MENU</div>
+)
+
+export default drawerToggle;

src/components/Navigation/Toolbar/Toolbar.js

@@ -3,11 +3,12 @@ import React from 'react';
 import classes from './Toolbar.css';
 import Logo from '../../Logo/Logo';
 import NavigationItems from '../NavigationItems/NavigationItems';
+import DrawerToggle from '../SideDrawer/DrawerToggle/DrawerToggle';
 
-const toolbar = () => {
+const toolbar = (props) => {
     return (
         <header className={classes.Toolbar}>
-            <div>MENU</div>
+            <DrawerToggle clicked={props.drawerToggleClicked} />
             <div className={classes.Logo}>
                 <Logo />
             </div>