From 59de02e283650061461298c7ef1df4831c36af2b Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Tue, 21 Apr 2020 14:51:22 -0700
Subject: [PATCH] feat: basic link elements on desktop

---
 src/components/Header.js   | 44 +++++++++++++++++++++++++++++++++++++-
 src/components/Header.scss | 12 ++++++++---
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 6a228eb11..43264c98b 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,7 +6,49 @@ import './Header.scss';
 
 const Header = ({ links }) => (
   <header className="Header">
-    <nav className="Header-nav Header-nav--nr"></nav>
+    <nav className="Header-nav Header-nav--nr">
+      <ul>
+        <li>
+          <a href="//newrelic.com" target="_blank" className="Header-nav-link">
+            New Relic
+          </a>
+        </li>
+        <li>
+          <Link to="/" className="Header-nav-link">
+            Developers
+          </Link>
+        </li>
+        <li>
+          <a
+            href="//opensource.newrelic.com"
+            target="_blank"
+            className="Header-nav-link"
+          >
+            Open Source
+          </a>
+        </li>
+        <li>
+          <a
+            href="//docs.newrelic.com"
+            target="_blank"
+            className="Header-nav-link"
+          >
+            Docs
+          </a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a
+            href="//githib.com/newrelic"
+            target="_blank"
+            className="Header-nav-link"
+          >
+            GitHub
+          </a>
+        </li>
+      </ul>
+    </nav>
 
     <h1 className="Header-title">
       <Link to="/">{'</>'} New Relic Developers</Link>
diff --git a/src/components/Header.scss b/src/components/Header.scss
index 1e08e7d7a..4d7c99108 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -1,6 +1,7 @@
 header.Header {
   background-color: #d7e6e8;
   margin-bottom: 1em;
+  padding-top: 0.8em;
 
   a {
     color: #000;
@@ -9,13 +10,13 @@ header.Header {
 
   h1.Header-title {
     font-size: 1.8em;
-    padding: 0.8em;
-    padding-bottom: 0.4em;
+    padding: 0.2em 0.8em 0.4em;
     margin: 0;
   }
 
   nav.Header-nav {
     width: 100%;
+    padding: 0 0.8em;
 
     ul {
       margin: 0;
@@ -26,7 +27,7 @@ header.Header {
   }
 
   a.Header-nav-link {
-    padding: 0.8em 0.6em;
+    padding: 0.6em;
 
     &:hover {
       cursor: pointer;
@@ -37,4 +38,9 @@ header.Header {
   nav.Header-nav--main > ul {
     justify-content: flex-end;
   }
+
+  nav.Header-nav--nr {
+    display: flex;
+    justify-content: space-between;
+  }
 }