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 {
-    <Aux>
+    state = {
-        <Toolbar />
+        showSideDrawer: true
-        <SideDrawer />
+    }
-        <main className={classes.Content}>
-            {props.children}
-        </main>
-    </Aux>
-)
 
-export default layout;
+    sideDrawerClosedHandler = () => {
+        this.setState({showSideDrawer: false});
+    }
+
+    render() {
+        return (
+            <Aux>
+                <Toolbar />
+                <SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} />
+                <main className={classes.Content}>
+                    {this.state.children}
+                </main>
+            </Aux>
+
+        );
+    };
+}
+
+export default Layout;

src/components/Navigation/SideDrawer/SideDrawer.js

@@ -3,17 +3,28 @@ 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>
-            <div className={classes.Logo}>
+            <Backdrop show={props.open} clicked={props.closed} />
-                <Logo />
+            <div className={attachedClasses.join(' ')}>
+                <div className={classes.Logo}>
+                    <Logo />
+                </div>
+                <nav>
+                    <NavigationItems />
+                </nav>
             </div>
-            <nav>
+
-                <NavigationItems />
+        </Aux>
-            </nav>
-        </div>
     )
 }