Adding a <Toolbar/> Component

README.md

@@ -37,6 +37,6 @@ Layout, Component & State Design: **[View](https://codepen.io/ch-sriram/full/JjX
 17. Adding a Custom Button `<StyledButton />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/d97b727fe03205c73aaad09d223f08dd18febcb4)
 18. Implementing the Functionality of the `<StyledButton />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/afd95bf43088d39c1e3a2ef626028dc4f2603259)
 
-### Adding the Toolbar & Side Drawer
+### Implementing the Toolbar & Side Drawer
 
-1. 
+1. Adding a `<Toolbar />` Component: [Commit Details]()

src/components/Layout/Layout.module.css

@@ -1,3 +1,3 @@
 .Content {
-  margin-top: 16px;
+  margin-top: 72px;
 }

src/components/Layout/layout.component.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import Aux from '../../hoc/Auxiliary/Auxiliary.hoc';
 import classes from './Layout.module.css';
+import Toolbar from '../Navigation/Toolbar/Toolbar.component';
 
 const layout = props => {
   return (
     <Aux>
-      <div>Toolbar, SideDrawer, Backdrop</div>
+      <Toolbar />
       <main className={classes.Content}>
         {props.children}
       </main>

src/components/Navigation/Toolbar/Toolbar.component.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Toolbar = styled.header`
+  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;
+
+  & nav {
+    height: 100%;
+  }
+`;
+
+const toolbar = props => (
+  <Toolbar>
+    <div>MENU</div>
+    <div>LOGO</div>
+    <nav>
+      ...
+    </nav>
+  </Toolbar>
+);
+
+export default toolbar;