From a937f0c1b69d6ea7c294e7a3617149518785991e Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Tue, 21 Apr 2020 14:34:49 -0700
Subject: [PATCH] chore: main navigation

---
 src/components/Header.js   | 16 +++++++++++++---
 src/components/Header.scss | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 0b33fcd9c..6a228eb11 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,13 +6,23 @@ import './Header.scss';
 
 const Header = ({ links }) => (
   <header className="Header">
-    <nav className="Header-navigation--nr"></nav>
+    <nav className="Header-nav Header-nav--nr"></nav>
 
     <h1 className="Header-title">
-      <Link to="/">{'</>'} New Relic Developer</Link>
+      <Link to="/">{'</>'} New Relic Developers</Link>
     </h1>
 
-    <nav className="Header-navigation--main"></nav>
+    <nav className="Header-nav Header-nav--main">
+      <ul>
+        {links.map((link, i) => (
+          <li key={i}>
+            <Link to={link.url} className="Header-nav-link">
+              {link.displayName}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
   </header>
 );
 
diff --git a/src/components/Header.scss b/src/components/Header.scss
index 611607a95..1e08e7d7a 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -1,3 +1,40 @@
 header.Header {
   background-color: #d7e6e8;
+  margin-bottom: 1em;
+
+  a {
+    color: #000;
+    text-decoration: none;
+  }
+
+  h1.Header-title {
+    font-size: 1.8em;
+    padding: 0.8em;
+    padding-bottom: 0.4em;
+    margin: 0;
+  }
+
+  nav.Header-nav {
+    width: 100%;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+    }
+  }
+
+  a.Header-nav-link {
+    padding: 0.8em 0.6em;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  nav.Header-nav--main > ul {
+    justify-content: flex-end;
+  }
 }