feat: recursively create sidebar navigation

src/components/Sidebar.js

@@ -1,14 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+
+import { link } from '../types';
+// TODO: styles
+
+// TODO: aria
+
+// recursively create navigation
+const renderNav = (page, index) => (
+  <li key={index}>
+    <Link to={page.url}>{page.displayName}</Link>
+    {page.children && <ul>{page.children.map(renderNav)}</ul>}
+  </li>
+);
 
 const Sidebar = ({ pages }) => (
   <aside className="Sidebar">
-    <div>This is the sidebar</div>
+    <h3>Pages</h3>
+    <nav>
+      <ul>{pages.map(renderNav)}</ul>
+    </nav>
   </aside>
 );
 
 Sidebar.propTypes = {
-  pages: PropTypes.array, // TODO
+  pages: PropTypes.arrayOf(link),
 };
 
 export default Sidebar;

src/pages/reference.js

@@ -7,7 +7,53 @@ import Sidebar from '../components/Sidebar';
 import '../templates/Reference.scss';
 
 // TODO: pull this in from Gatsby
-const pages = [];
+const pages = [
+  { displayName: 'Overview', url: '' },
+  {
+    displayName: 'CLI',
+    url: '',
+    children: [
+      { displayName: 'newrelic', url: '' },
+      { displayName: 'nr1', url: '' },
+    ],
+  },
+  { displayName: 'GraphQL', url: '' },
+  {
+    displayName: 'Applications',
+    url: '',
+    children: [
+      { displayName: 'Component Library', url: '', active: true },
+      { displayName: 'File structure', url: '' },
+    ],
+  },
+  {
+    displayName: 'Data Collectors',
+    url: '',
+    children: [
+      { displayName: 'Custom Attributes', url: '' },
+      { displayName: 'Custom Events', url: '' },
+      { displayName: 'Open Telemetry', url: '' },
+      { displayName: 'Telemetry SDK', url: '' },
+    ],
+  },
+  {
+    displayName: 'Automation',
+    url: '',
+    children: [
+      { displayName: 'Cloud Formation Provider', url: '' },
+      { displayName: 'Terraform Provider', url: '' },
+      {
+        displayName: 'Agent Deploy',
+        url: '',
+        children: [
+          { displayName: 'Ansible', url: '' },
+          { displayName: 'Chef', url: '' },
+          { displayName: 'Puppet', url: '' },
+        ],
+      },
+    ],
+  },
+];
 
 const Reference = () => (
   <Layout>