Merge pull request #23 from codefordenver/dh-header-nav

Dh header nav

frontend/src/App/App.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.scss';
+import Header from '../Header/Header.js';
+
+const App = () => {
+  return (
+    <main className="app-wrapper">
+      <Header />
+    </main>
+  )
+};
+
+export default App;

frontend/src/Header/Header.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Nav from '../Nav/Nav.js';
+import './Header.scss'; 
+
+const Header = () => {
+  return (
+    <header>
+      <div role="logo-container" className="header-logo-container">
+        <img className="header-logo" src="./assets/Exit_Plan-SecondaryLogo.svg" alt="exit plan logo"/>
+      </div>
+      <Nav/>
+    </header>
+  )
+};
+
+export default Header;

frontend/src/Header/Header.scss

@@ -0,0 +1,16 @@
+@import '../index.scss'; 
+
+header {
+  background-color: $dark-blue; 
+  height: 100px; 
+  display: flex; 
+  justify-content: space-between; 
+}
+
+.header-logo {
+  height: 80px; 
+  width: 200px; 
+  margin-top: 10px; 
+  padding: 10px; 
+}
+

frontend/src/Nav/Nav.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Nav.scss'; 
+
+const navFilters = ['HOME', 'ABOUT', 'RESOURCES', 'ARTICLES', 'CONTACT'];
+
+const Nav = () => {
+  const filterList = navFilters.map(filter => (<li>{filter}</li>))
+  return(
+    <nav>
+      <ul>
+        { filterList }
+      </ul>
+    </nav>
+  )
+};
+
+export default Nav;

frontend/src/Nav/Nav.scss

@@ -0,0 +1,20 @@
+@import '../index.scss'; 
+
+nav {
+  margin-right: 30px; 
+  padding: 20px; 
+}
+
+ul {
+  display: flex; 
+}
+
+li {
+  list-style: none; 
+  cursor: pointer;
+  color: $off-white; 
+  font-family: Helvetica, sans-serif;  
+  font-size: 2rem; 
+  font-weight: 400; 
+  padding: 15px; 
+}

frontend/src/_variables.scss

@@ -0,0 +1,8 @@
+// Colors 
+$dark-blue: #1B1464; 
+$light-blue: #AFC3E0; 
+$off-white: #F5F5F5;
+
+// Fonts 
+@import url('https://fonts.googleapis.com/css?family=Gothic+A1');
+$font-family: 'Gothic A1', sans-serif;

frontend/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import './index.scss';
+import App from './App/App.js';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

frontend/src/index.scss

@@ -0,0 +1,7 @@
+@import 'variables'; 
+
+* {
+  box-sizing: border-box; 
+  margin: 0; 
+  padding: 0; 
+}