From b79cb5e3fffbb51967371fcb03f9d67175afab77 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 17:02:02 +1300
Subject: [PATCH] component: reuse component Backdrop in component SideDrawer

---
 src/components/Layout/Layout.js               | 35 +++++++++++++------
 .../Navigation/SideDrawer/SideDrawer.js       | 27 +++++++++-----
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index aa96755..0dfe4ac 100644
--- a/src/components/Layout/Layout.js
+++ b/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) => (
-    <Aux>
-        <Toolbar />
-        <SideDrawer />
-        <main className={classes.Content}>
-            {props.children}
-        </main>
-    </Aux>
-)
+class Layout extends Component {
+    state = {
+        showSideDrawer: true
+    }
 
-export default layout;
\ No newline at end of file
+    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;
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.js b/src/components/Navigation/SideDrawer/SideDrawer.js
index eace56f..518789d 100644
--- a/src/components/Navigation/SideDrawer/SideDrawer.js
+++ b/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}>
-            <div className={classes.Logo}>
-                <Logo />
+        <Aux>
+            <Backdrop show={props.open} clicked={props.closed} />
+            <div className={attachedClasses.join(' ')}>
+                <div className={classes.Logo}>
+                    <Logo />
+                </div>
+                <nav>
+                    <NavigationItems />
+                </nav>
             </div>
-            <nav>
-                <NavigationItems />
-            </nav>
-        </div>
+
+        </Aux>
     )
 }