Merge pull request #150 from newrelic/cayla/update-layout

Update dev site layout
newrelic · Jun 15, 2020 · 1ecfb6e · 1ecfb6e
2 parents ccdb7ec + e80dd1d
commit 1ecfb6e
Show file tree

Hide file tree

Showing 18 changed files with 233 additions and 348 deletions.
diff --git a/src/components/BreadcrumbBar.js b/src/components/BreadcrumbBar.js
@@ -1,26 +1,23 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './BreadcrumbBar.module.scss';
-import Container from './Container';
 import PropTypes from 'prop-types';
 import { link } from '../types';
 
 const BreadcrumbBar = ({ crumbs, duration }) => (
   <div className={styles.breadcrumbBar}>
-    <Container className={styles.container}>
-      <ul className={styles.crumbs}>
-        {crumbs.map((crumb, index) => (
-          <li key={index}>
-            {crumb.url ? (
-              <Link to={crumb.url}>{crumb.displayName}</Link>
-            ) : (
-              <span>{crumb.displayName}</span>
-            )}
-          </li>
-        ))}
-      </ul>
-      {duration && <div className={styles.duration}>{duration}</div>}
-    </Container>
+    <ul className={styles.crumbs}>
+      {crumbs.map((crumb, index) => (
+        <li key={index}>
+          {crumb.url ? (
+            <Link to={crumb.url}>{crumb.displayName}</Link>
+          ) : (
+            <span>{crumb.displayName}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+    {duration && <div className={styles.duration}>{duration}</div>}
   </div>
 );
 

diff --git a/src/components/Container.js b/src/components/Container.js
diff --git a/src/components/Container.module.scss b/src/components/Container.module.scss
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,18 +1,15 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Container from './Container';
 import styles from './Footer.module.scss';
 
 const Footer = () => (
   <footer className={styles.footer}>
-    <Container className={styles.container}>
-      <div className={styles.leftColumn}>
-        <Link to="/" className={`${styles.logo} logo`} />
-        <div className={styles.copyright}>
-          Copyright &copy; 2020 New Relic Inc.
-        </div>
+    <div className={styles.leftColumn}>
+      <Link to="/" className={`${styles.logo} logo`} />
+      <div className={styles.copyright}>
+        Copyright &copy; 2020 New Relic Inc.
       </div>
-    </Container>
+    </div>
   </footer>
 );
 

diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
@@ -7,16 +7,6 @@
   margin-top: 10rem;
 }
 
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  @media (max-width: 760px) {
-    justify-content: center;
-  }
-}
-
 .leftColumn {
   display: flex;
   align-items: center;

diff --git a/src/components/GuideListing/GuideListing.js b/src/components/GuideListing/GuideListing.js
@@ -1,4 +1,3 @@
-import Container from '../Container';
 import Heading from './Heading';
 import Description from './Description';
 import List from './List';
@@ -7,9 +6,7 @@ import React from 'react';
 import styles from './GuideListing.module.scss';
 
 const GuideListing = ({ children }) => (
-  <div className={styles.guideListing}>
-    <Container className={styles.container}>{children}</Container>
-  </div>
+  <div className={styles.guideListing}>{children}</div>
 );
 
 GuideListing.Heading = Heading;

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'gatsby';
 import cx from 'classnames';
-import Container from './Container';
 import ExternalLink from './ExternalLink';
 import HamburgerMenu from './HamburgerMenu';
 import styles from './Header.module.scss';
@@ -11,60 +10,38 @@ const Header = () => {
 
   return (
     <header className={cx(styles.main, { [styles.isOpen]: isOpen })}>
-      <Container className={styles.container}>
-        <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
-          <h3 className={styles.hideOnDesktop}>Sites</h3>
-          <ul>
-            <li className={styles.hideOnMobile}>
-              <ExternalLink
-                className={cx(styles.logo, styles.logoNr)}
-                href="//newrelic.com"
-              />
-            </li>
-            <li>
-              <Link to="/" className={styles.isActive}>
-                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 role="navigation" aria-label="New Relic" className={styles.navNr}>
+        <h3 className={styles.hideOnDesktop}>Sites</h3>
+        <ul>
+          <li className={styles.hideOnMobile}>
+            <ExternalLink
+              className={cx(styles.logo, styles.logoNr)}
+              href="//newrelic.com"
+            />
+          </li>
+          <li>
+            <Link to="/" className={styles.isActive}>
+              Developers
+            </Link>
+          </li>
+          <li>
+            <ExternalLink href="//opensource.newrelic.com">
+              Open Source
+            </ExternalLink>
+          </li>
+          <li>
+            <ExternalLink href="//docs.newrelic.com">
+              Documentation
+            </ExternalLink>
+          </li>
+        </ul>
+      </nav>
 
-        {/* <h1 className={styles.title}>
-          <Link to="/" className={cx(styles.logo, styles.titleLogo)} />
-        </h1> */}
-
-        <HamburgerMenu
-          className={styles.hamburgerMenu}
-          toggle={() => setIsOpen(!isOpen)}
-          isOpen={isOpen}
-        />
-
-        <nav className={styles.navTools}>
-          <h3 className={styles.hideOnDesktop}>Tools</h3>
-          <ul>
-            <li>
-              <ExternalLink
-                className={cx(styles.logo, styles.logoGithub)}
-                href="//github.com/newrelic"
-              >
-                <span className={styles.hideOnDesktop}>
-                  Contribute on GitHub
-                </span>
-              </ExternalLink>
-            </li>
-          </ul>
-        </nav>
-      </Container>
+      <HamburgerMenu
+        className={styles.hamburgerMenu}
+        toggle={() => setIsOpen(!isOpen)}
+        isOpen={isOpen}
+      />
     </header>
   );
 };

diff --git a/src/components/Jumbotron.js b/src/components/Jumbotron.js
@@ -1,42 +1,39 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Container from './Container';
 import CallToAction from './CallToAction';
 import styles from './Jumbotron.module.scss';
 
 const Jumbotron = () => (
-  <Container>
-    <div className={styles.jumbotron}>
-      <h1 className={styles.h1}>Create a free account to get started</h1>
-      <div className={styles.callToActionContainer}>
-        <CallToAction step="1" text="Create your free account">
-          <form>
-            <input placeholder="[email protected]" />
-            <button className={styles.signUpButton} type="submit">
-              Sign up
-            </button>
-          </form>
-          <Link to="/">Sign in to New Relic One</Link>
-        </CallToAction>
-        <CallToAction step="2" text="Get your API key">
-          <select id="api-keys" name="api-keys">
-            <option value="" disabled selected hidden>
-              Select or create a key...
-            </option>
-            <option value="key">key</option>
-            <option value="otherkey">otherkey</option>
-          </select>
-          <Link to="/">Create a new API key</Link>
-        </CallToAction>
-        <CallToAction step="3" text="Install the newrelic CLI">
-          <button className={styles.downloadButton} type="button">
-            Download for macOS
+  <div className={styles.jumbotron}>
+    <h1 className={styles.h1}>Create a free account to get started</h1>
+    <div className={styles.callToActionContainer}>
+      <CallToAction step="1" text="Create your free account">
+        <form>
+          <input placeholder="[email protected]" />
+          <button className={styles.signUpButton} type="submit">
+            Sign up
           </button>
-          <Link to="/">Download for other platforms</Link>
-        </CallToAction>
-      </div>
+        </form>
+        <Link to="/">Sign in to New Relic One</Link>
+      </CallToAction>
+      <CallToAction step="2" text="Get your API key">
+        <select id="api-keys" name="api-keys">
+          <option value="" disabled selected hidden>
+            Select or create a key...
+          </option>
+          <option value="key">key</option>
+          <option value="otherkey">otherkey</option>
+        </select>
+        <Link to="/">Create a new API key</Link>
+      </CallToAction>
+      <CallToAction step="3" text="Install the newrelic CLI">
+        <button className={styles.downloadButton} type="button">
+          Download for macOS
+        </button>
+        <Link to="/">Download for other platforms</Link>
+      </CallToAction>
     </div>
-  </Container>
+  </div>
 );
 
 export default Jumbotron;
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -3,23 +3,20 @@ import PropTypes from 'prop-types';
 
 import Footer from './Footer';
 import Header from './Header';
+import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
+import pages from '../data/sidenav.json';
 import './styles.scss';
 
-const pages = [
-  { displayName: 'Collect data', url: '/collect-data' },
-  { displayName: 'Explore data', url: '/explore-data' },
-  { displayName: 'Build apps', url: '/build-apps' },
-  { displayName: 'Automate workflows', url: '/automate-workflows' },
-  { displayName: 'Developer docs', url: '/docs' },
-];
-
 const Layout = ({ children }) => (
-  <div className={styles.layout}>
-    <Header pages={pages} />
-    <main>{children}</main>
+  <>
+    <Header />
+    <div className={styles.layout}>
+      <Sidebar pages={pages} />
+      <main>{children}</main>
+    </div>
     <Footer pages={pages} />
-  </div>
+  </>
 );
 
 Layout.propTypes = {

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
@@ -1,13 +1,8 @@
 .layout {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  > main {
-    flex: 1 0 auto;
-  }
-
-  > footer {
-    flex-shrink: 0;
-  }
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-gap: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
 }
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -22,6 +22,7 @@ const renderNav = (page, index) => (
 
 const Sidebar = ({ className, pages, isOpen, toggle }) => (
   <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
+    <Link to="/" className={styles.logo} />
     <div className={styles.top}>
       <h3>Pages</h3>
       <button

diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
@@ -1,6 +1,4 @@
 .sidebar {
-  padding: 1rem;
-
   ul {
     margin: 0;
     padding-left: 1rem;
@@ -59,3 +57,13 @@
   display: flex;
   justify-content: space-between;
 }
+
+.logo {
+  padding: 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 247px;
+  height: 64px;
+  margin-right: 1rem;
+  background-image: url('../images/developers-logo.svg');
+}
diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -78,6 +78,10 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   font-size: 16px;