From bfa2370f51e95207de3f4c4fdbc13ba2f408f816 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 13:41:00 +1300
Subject: [PATCH] component: add Toolbar component

---
 src/components/Layout/Layout.css               |  2 +-
 src/components/Layout/Layout.js                |  3 ++-
 .../UI/Navigation/Toolbar/Toolbar.css          | 18 ++++++++++++++++++
 .../UI/Navigation/Toolbar/Toolbar.js           | 18 ++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UI/Navigation/Toolbar/Toolbar.css
 create mode 100644 src/components/UI/Navigation/Toolbar/Toolbar.js

diff --git a/src/components/Layout/Layout.css b/src/components/Layout/Layout.css
index a5f1013..c5e6965 100644
--- a/src/components/Layout/Layout.css
+++ b/src/components/Layout/Layout.css
@@ -1,3 +1,3 @@
 .Content{
-    margin-top: 16px;
+    margin-top: 72px;
 }
\ No newline at end of file
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 91df4b1..6181d35 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -2,10 +2,11 @@ import React from 'react';
 
 import Aux from '../../hoc/Auxiliary';
 import classes from './Layout.css';
+import Toolbar from '../UI/Navigation/Toolbar/Toolbar';
 
 const layout = (props) => (
     <Aux>
-        <div>Toolbar, SideDrawer, Backdrop</div>
+        <Toolbar />
         <main className={classes.Content}>
             {props.children}
         </main>
diff --git a/src/components/UI/Navigation/Toolbar/Toolbar.css b/src/components/UI/Navigation/Toolbar/Toolbar.css
new file mode 100644
index 0000000..c3aac39
--- /dev/null
+++ b/src/components/UI/Navigation/Toolbar/Toolbar.css
@@ -0,0 +1,18 @@
+.Toolbar {
+    height: 56px;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #703B09;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    z-index: 90;
+}
+
+.Toolbar nav{
+    height: 100%;
+}
diff --git a/src/components/UI/Navigation/Toolbar/Toolbar.js b/src/components/UI/Navigation/Toolbar/Toolbar.js
new file mode 100644
index 0000000..8cecd8c
--- /dev/null
+++ b/src/components/UI/Navigation/Toolbar/Toolbar.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import classes from './Toolbar.css';
+
+const toolbar = () => {
+    return (
+        <header className={classes.Toolbar}>
+            <div>MENU</div>
+            <div>LOGO</div>
+            <nav>
+                ...
+            </nav>
+        </header>
+    )
+}
+
+
+export default toolbar;
\ No newline at end of file