Merge pull request #10 from newrelic/zstickles/header

Header Component (desktop styles)

src/components/Container.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Container.scss';
+
+const Container = ({ children }) => (
+  <div className="u-container">{children}</div>
+);
+
+Container.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Container;

src/components/Container.scss

@@ -0,0 +1,4 @@
+.u-container {
+  max-width: 1200px;
+  margin: auto;
+}

src/components/ExternalLink.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ExternalLink = ({ href, children }) => (
+  <a
+    href={href}
+    target="_blank"
+    className="ExternalLink"
+    rel="noopener noreferrer"
+  >
+    {children}
+  </a>
+);
+
+ExternalLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default ExternalLink;

src/components/Header.js

@@ -0,0 +1,106 @@
+import { Link, useStaticQuery, graphql } from 'gatsby';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Container from './Container';
+import ExternalLink from './ExternalLink';
+import './Header.scss';
+
+const Header = ({ pages }) => {
+  // NOTE: we may want to abstract this
+  const data = useStaticQuery(graphql`
+    query {
+      nrLogo: file(relativePath: { eq: "NewRelic-logo.png" }) {
+        childImageSharp {
+          fixed(width: 739, height: 133, quality: 100) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+      ghLogo: file(relativePath: { eq: "GitHub-logo.png" }) {
+        childImageSharp {
+          fixed(width: 64, height: 64, quality: 100) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <header className="Header--main">
+      <Container>
+        <div className="Header-topBar">
+          <nav role="navigation" aria-label="New Relic" className="nav--nr">
+            <ul>
+              <li>
+                <ExternalLink href="//newrelic.com">
+                  <img src={data.nrLogo.childImageSharp.fixed.src} />
+                </ExternalLink>
+              </li>
+              <li>
+                <Link to="/">Developers</Link>
+              </li>
+              <li>
+                <ExternalLink href="//opensource.newrelic.com">
+                  Open Source
+                </ExternalLink>
+              </li>
+              <li>
+                <ExternalLink href="//docs.newrelic.com">
+                  Documentation
+                </ExternalLink>
+              </li>
+            </ul>
+          </nav>
+
+          <nav className="nav--user">
+            <ul>
+              <li>
+                <ExternalLink href="//github.com/newrelic">
+                  <img src={data.ghLogo.childImageSharp.fixed.src} />
+                </ExternalLink>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <h1>
+          <Link to="/">{'</>'} New Relic Developers</Link>
+        </h1>
+
+        <nav role="navigation" aria-label="Main" className="nav--main">
+          <ul>
+            {pages.map((page, i) => (
+              <li key={i}>
+                <Link to={page.path}>{page.displayName}</Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </Container>
+    </header>
+  );
+};
+
+Header.propTypes = {
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      displayName: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+      active: PropTypes.bool,
+    })
+  ),
+};
+
+Header.defaultProps = {
+  pages: [
+    { displayName: 'Collect Data', path: '' },
+    { displayName: 'Explore Data', path: '' },
+    { displayName: 'Build Apps', path: '' },
+    { displayName: 'Automate New Relic', path: '' },
+    { displayName: 'Reference Docs', path: '' },
+  ],
+};
+
+export default Header;

src/components/Header.scss

@@ -0,0 +1,63 @@
+header.Header--main {
+  background-color: #d7e6e8;
+  margin-bottom: 1rem;
+
+  a {
+    color: #000;
+    text-decoration: none;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+    margin: 0;
+
+    a {
+      padding-left: 0;
+    }
+  }
+
+  nav > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
+    li:first-child > a {
+      padding-left: 0;
+    }
+
+    li:last-child > a {
+      padding-right: 0;
+    }
+  }
+
+  a {
+    padding: 0.6rem;
+    display: inline-block;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  nav img {
+    height: 1.2rem;
+    vertical-align: middle;
+    padding-bottom: 0.1rem;
+  }
+
+  .Header-topBar {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  nav.nav--main {
+    width: 100%;
+    height: auto;
+
+    ul {
+      justify-content: flex-end;
+    }
+  }
+}

src/components/Layout.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Header from './Header';
+import './styles.scss';
+
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    <div
+      style={{
+        margin: `0 auto`,
+        maxWidth: 960,
+        padding: `0 1.0875rem 1.45rem`,
+      }}
+    >
+      <main>{children}</main>
+      <footer>
+        © {new Date().getFullYear()}, Built with
+        {` `}
+        <a href="https://www.gatsbyjs.org">Gatsby</a>
+      </footer>
+    </div>
+  </>
+);
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Layout;

src/pages/404.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Layout from '../components/Layout';
+import SEO from '../components/Seo';
 
 const NotFoundPage = () => (
   <Layout>

src/pages/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
-import Layout from '../components/layout';
-import Image from '../components/image';
-import SEO from '../components/seo';
+import Layout from '../components/Layout';
+import Image from '../components/Image';
+import SEO from '../components/Seo';
 
 const IndexPage = () => (
   <Layout>

src/pages/page-2.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
-import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Layout from '../components/Layout';
+import SEO from '../components/Seo';
 
 const SecondPage = () => (
   <Layout>