feat(docs): add sidenav (uber#704)

documentation-site/components/layout.js

@@ -20,6 +20,7 @@ import {
 import {StatefulSelect, TYPE} from 'baseui/select';
 
 import MarkdownElements from './markdown-elements';
+import Sidebar from './sidebar';
 import Logo from '../images/Logo.png';
 
 type PropsT = {
@@ -67,9 +68,8 @@ export default (props: PropsT) => (
     </HeaderNavigation>
 
     <Block display="flex" flex="1" paddingTop="scale500">
-      <Block display="flex" marginLeft="scale800" maxWidth="170px">
-        navbar. this component will include the list of components and links to
-        doc pages.
+      <Block display="flex" marginLeft="scale800" marginRight="scale800">
+        <Sidebar />
       </Block>
 
       <Block

documentation-site/components/sidebar.js

@@ -0,0 +1,82 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import {Block} from 'baseui/block';
+import {styled} from 'baseui';
+import Link from 'next/link';
+
+import Routes from '../routes';
+
+const List = styled(Block, ({$theme}) => ({
+  position: 'relative',
+  marginTop: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  marginRight: '0',
+  paddingLeft: '0',
+  paddingRight: '0',
+  listStyle: 'none',
+}));
+
+const ListItem = styled(Block, ({$theme}) => ({
+  paddingLeft: $theme.sizing.scale400,
+}));
+
+const StyledLink = styled('a', ({$theme}) => ({
+  textDecoration: 'none',
+  cursor: 'pointer',
+  color: $theme.colors.black,
+  ':visited': {
+    color: $theme.colors.black,
+  },
+  ':hover': {
+    color: $theme.colors.primary,
+  },
+}));
+
+const NavigationLink = props => {
+  return (
+    <Block paddingBottom="scale300">
+      <Link passHref={true} href={props.path} prefetch>
+        <StyledLink tabIndex="0">{props.text}</StyledLink>
+      </Link>
+    </Block>
+  );
+};
+
+const SubNavigation = props => {
+  const {routes = []} = props;
+  return routes.map(route => {
+    return (
+      <ListItem font="font300" key={route.path} as="li">
+        <NavigationLink path={route.path} text={route.text} />
+      </ListItem>
+    );
+  });
+};
+
+export default () => (
+  <List as="ul" font="font350">
+    {Routes.map(route => {
+      return (
+        <React.Fragment key={route.path}>
+          {route.path ? (
+            <NavigationLink path={route.path} text={route.text} />
+          ) : (
+            route.text
+          )}
+          <List>
+            <SubNavigation routes={route.children} />
+          </List>
+        </React.Fragment>
+      );
+    })}
+  </List>
+);

documentation-site/routes.js

@@ -0,0 +1,44 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/* eslint-disable flowtype/require-valid-file-annotation */
+/* eslint-env node */
+
+const {join} = require('path');
+const isProd = process.env.BUILD_ENV === 'production';
+const prefix = isProd ? '/beta' : '';
+
+const getPath = path => join(prefix, path);
+
+const routes = [
+  {
+    text: 'Getting started',
+    path: getPath('/getting-started'),
+    children: [
+      {
+        text: 'Playground',
+        path: getPath('/playground'),
+      },
+      {
+        text: 'Versioning policy',
+        path: getPath('/versioning-policy'),
+      },
+    ],
+  },
+  {
+    text: 'Theming',
+    path: getPath('/custom-themes'),
+    children: [
+      {
+        text: 'Theming values',
+        path: getPath('/theming-values'),
+      },
+    ],
+  },
+];
+
+export default routes;

netlify.toml

@@ -1,2 +1,5 @@
 [build]
   publish = "public/"
+
+[build.environment]
+  BUILD_ENV = "production"