feat: basic link elements on desktop

newrelic · Apr 21, 2020 · 59de02e · 59de02e
1 parent a937f0c
commit 59de02e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git 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
@@ -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;
+  }
 }