From a38311364452b9f98620cf326b6d32247e1ce9f8 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Fri, 23 Feb 2018 22:27:44 +1100
Subject: [PATCH] Built initial navbar design

---
 public/components/navigation/Navbar.jsx |  8 +++++++-
 public/styles/components/_header.scss   |  1 +
 public/styles/components/_navbar.scss   | 18 ++++++++++++++++--
 public/styles/index.scss                |  7 +++++++
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/public/components/navigation/Navbar.jsx b/public/components/navigation/Navbar.jsx
index e638e35..19889f1 100644
--- a/public/components/navigation/Navbar.jsx
+++ b/public/components/navigation/Navbar.jsx
@@ -12,6 +12,9 @@
 
 import React from 'react';
 
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import { faBars } from '@fortawesome/fontawesome-free-solid'
+
 class Navbar extends React.Component {
   constructor(props) {
     super(props);
@@ -20,7 +23,10 @@ class Navbar extends React.Component {
   render() {
     return (
       <nav className="c-navbar">
-        This is my navbar
+        <button type="button" className="c-navbar__menu-button">
+          <FontAwesomeIcon icon={faBars} />
+        </button>
+        This is my navbar11
       </nav>
     )
   }
diff --git a/public/styles/components/_header.scss b/public/styles/components/_header.scss
index 56c29b4..b8e36ed 100644
--- a/public/styles/components/_header.scss
+++ b/public/styles/components/_header.scss
@@ -9,4 +9,5 @@
  */
 .c-header {
   border: 1px solid red;
+  position: relative;
 }
diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss
index 694581a..deafe63 100644
--- a/public/styles/components/_navbar.scss
+++ b/public/styles/components/_navbar.scss
@@ -3,12 +3,26 @@
  *    Styles for Navbar
  *
  *  Dependencies:
+ *    styles/tools/_box-shadow.scss
  *
  *  Version:
  *    1.0.0 - 2018/02/23
  */
+$c-navbar--z-index: 100;
 .c-navbar {
-  width: 100%;
+  width: 90%;
   position: fixed;
-  
+  top:3em;
+  left: 0;
+  background: white;
+  z-index: $c-navbar--z-index;
+  left: 1%;
+
+  @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
+}
+
+
+.c-navbar__menu-button {
+  font-size: 2em;
+  padding: 0.5em 0.75em;
 }
diff --git a/public/styles/index.scss b/public/styles/index.scss
index 6610e68..fe03508 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -9,8 +9,11 @@
 
 //Settings
 @import './settings/colors.scss';
+@import './settings/responsive.scss';
+@import './settings/typography.scss';
 
 //Tools
+@import './tools/_box-shadow.scss';
 @import './tools/_gradients.scss';
 
 //Resets
@@ -18,6 +21,8 @@
 
 //Elements
 @import './elements/_body.scss';
+@import './elements/_button.scss';
+@import './elements/_headings.scss';
 @import './elements/_html.scss';
 
 //Objects
@@ -25,9 +30,11 @@
 //Components
 @import './components/_app.scss';
 @import './components/_header.scss';
+@import './components/_navbar.scss';
 
 //Utilities
 
 //Vendor
+@import './vendor/fonts.scss';
 
 //Trumps