Built initial navbar design

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>
     )
   }

public/styles/components/_header.scss

@@ -9,4 +9,5 @@
  */
 .c-header {
   border: 1px solid red;
+  position: relative;
 }

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;
 }

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