chore: main navigation

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

Hide file tree

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