Merge pull request #50 from newrelic/zstickles/sidebar-nav

Sidebar Navigation for Reference Pages

Author: timglaser

src/components/Layout.js

@@ -6,11 +6,11 @@ import Header from './Header';
 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' },
+  { 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 }) => (

src/components/Sidebar.js

@@ -9,9 +9,13 @@ import './Sidebar.scss';
 // recursively create navigation
 const renderNav = (page, index) => (
   <li key={index}>
-    <Link to={page.url} className={cx({ 'is-active': page.active })}>
-      {page.displayName}
-    </Link>
+    {page.url ? (
+      <Link to={page.url} className={cx({ 'is-active': page.active })}>
+        {page.displayName}
+      </Link>
+    ) : (
+      <div>{page.displayName}</div>
+    )}
     {page.children && <ul>{page.children.map(renderNav)}</ul>}
   </li>
 );

src/data/sidenav.json

@@ -0,0 +1,21 @@
+[
+  {
+    "displayName": "Guides",
+    "url": "/guides"
+  },
+  {
+    "displayName": "Foo",
+    "children": [
+      {
+        "displayName": "Baz",
+        "url": "/foo/baz",
+        "children": []
+      },
+      {
+        "displayName": "Bar",
+        "url": "/foo/bar",
+        "children": []
+      }
+    ]
+  }
+]

src/markdown-pages/foo-bar-baz.md

@@ -0,0 +1,10 @@
+---
+path: '/foo/baz'
+duration: '0 min'
+title: 'Baz'
+template: 'GuideTemplate'
+---
+
+## This is the Baz page within Foo
+
+Page added to test the sidebar navigation.

src/markdown-pages/foo-bar.md

@@ -0,0 +1,10 @@
+---
+path: '/foo/bar'
+duration: '0 min'
+title: 'Bar'
+template: 'GuideTemplate'
+---
+
+## This is the Bar page within Foo
+
+Page added to test the sidebar navigation.

src/markdown-pages/guide-index.md

@@ -0,0 +1,10 @@
+---
+path: '/guides'
+duration: '0 min'
+title: 'Guides'
+template: 'GuideTemplate'
+---
+
+## This is the top-level guide page
+
+Page added to test the sidebar navigation.

src/pages/reference.js

@@ -1,61 +1,13 @@
 import React, { useState } from 'react';
-
 import Container from '../components/Container';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 
+import pages from '../data/sidenav.json';
+
 // TODO: move this js file to same directory and update import
 import '../templates/Reference.scss';
 
-// TODO: pull this in from Gatsby
-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 = () => {
   const [isOpen, setIsOpen] = useState(false);
 

src/types.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 // it is not very performant.
 export const link = PropTypes.shape({
   displayName: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
+  url: PropTypes.string,
   active: PropTypes.bool,
   children: PropTypes.array,
 });