component: reuse component Backdrop in component SideDrawer

src/components/Layout/Layout.js

@@ -1,18 +1,31 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import Aux from '../../hoc/Auxiliary';
 import classes from './Layout.css';
 import Toolbar from '../Navigation/Toolbar/Toolbar';
 import SideDrawer from '../Navigation/SideDrawer/SideDrawer';
 
-const layout = (props) => (
+class Layout extends Component {
+    state = {
+        showSideDrawer: true
+    }
+
+    sideDrawerClosedHandler = () => {
+        this.setState({showSideDrawer: false});
+    }
+
+    render() {
+        return (
             <Aux>
                 <Toolbar />
-        <SideDrawer />
+                <SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} />
                 <main className={classes.Content}>
-            {props.children}
+                    {this.state.children}
                 </main>
             </Aux>
-)
 
-export default layout;
+        );
+    };
+}
+
+export default Layout;

src/components/Navigation/SideDrawer/SideDrawer.js

@@ -3,10 +3,19 @@ import React from 'react';
 import classes from './SideDrawer.css';
 import Logo from '../../Logo/Logo';
 import NavigationItems from '../NavigationItems/NavigationItems';
+import Aux from '../../../hoc/Auxiliary';
+import Backdrop from '../../UI/Backdrop/Backdrop';
+
+const sideDrawer = (props) => {
+    let attachedClasses = [classes.SideDrawer, classes.Close];
+    if (props.open){
+        attachedClasses = [classes.SideDrawer, classes.Open];
+    }
 
-const sideDrawer = () => {
     return (
-        <div className={classes.SideDrawer}>
+        <Aux>
+            <Backdrop show={props.open} clicked={props.closed} />
+            <div className={attachedClasses.join(' ')}>
                 <div className={classes.Logo}>
                     <Logo />
                 </div>
@@ -14,6 +23,8 @@ const sideDrawer = () => {
                     <NavigationItems />
                 </nav>
             </div>
+
+        </Aux>
     )
 }