From 4deeab8324270f2f401c4abd9949553f74a17ecf Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 17:40:24 +1300
Subject: [PATCH] component: add SideDrawer toogle button

---
 src/components/Layout/Layout.js                        | 10 ++++++++--
 .../SideDrawer/DrawerToggle/DrawerToggle.css           |  0
 .../Navigation/SideDrawer/DrawerToggle/DrawerToggle.js |  8 ++++++++
 src/components/Navigation/Toolbar/Toolbar.js           |  5 +++--
 4 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css
 create mode 100644 src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 0dfe4ac..e105003 100644
--- a/src/components/Layout/Layout.js
+++ b/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}
diff --git a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js
new file mode 100644
index 0000000..7308c6a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.js b/src/components/Navigation/Toolbar/Toolbar.js
index 7ba0f10..5a026f3 100644
--- a/src/components/Navigation/Toolbar/Toolbar.js
+++ b/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>