From e6f0d986dcbbe0607d04b19339512e7e33ed9e24 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 17:53:50 +1300
Subject: [PATCH] component: replace word menu with three rows

---
 .../SideDrawer/DrawerToggle/DrawerToggle.css  | 23 +++++++++++++++++++
 .../SideDrawer/DrawerToggle/DrawerToggle.js   |  7 +++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css
index e69de29..2901ae1 100644
--- a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css
+++ b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.css
@@ -0,0 +1,23 @@
+.DrawerToggle {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px 0;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.DrawerToggle div {
+    width: 90%;
+    height: 3px;
+    background-color: white;
+}
+
+@media (min-width: 500px) {
+    .DrawerToggle {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js
index 7308c6a..911ac08 100644
--- a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js
+++ b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js
@@ -1,8 +1,13 @@
 import React from 'react';
 
+import classes from './DrawerToggle.css';
 
 const drawerToggle = (props) => (
-    <div onClick={props.clicked}>MENU</div>
+    <div className={classes.DrawerToggle} onClick={props.clicked}>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
 )
 
 export default drawerToggle;
\ No newline at end of file