Add the initial version.

.gitignore

@@ -0,0 +1,8 @@
+# build output
+.next
+
+# dependencies
+node_modules
+
+# logs
+npm-debug.log

components/arrow.js

@@ -0,0 +1,19 @@
+const Arrow = () => (
+  <svg
+    style={{ fill: 'inherit' }}
+    width="27px"
+    height="14px"
+    viewBox="0 0 27 14"
+    version="1.1"
+  >
+    <g id="Page-1" stroke="none" strokeWidth="1" fillRule="evenodd">
+      <polygon
+        id="Arrow"
+        fillRule="nonzero"
+        points="13.4999996 13.9214282 0.6 1.17499997 1.82857139 0.1 13.4999996 11.7714282 25.1714278 0.1 26.3999992 1.17499997"
+      />
+    </g>
+  </svg>
+)
+
+export default Arrow

components/css-config.js

@@ -0,0 +1,8 @@
+export const FONT_FAMILY_SANS =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+
+export const FONT_FAMILY_MONO =
+  'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif'
+
+export const COLOR_ERROR = '#FF001F'
+export const COLOR_SUCCESS = '#067DF7'

components/docs/navbar/desktop.js

@@ -0,0 +1,141 @@
+import React from 'react'
+import data from '../../../lib/data/docs'
+import Link from 'next/link'
+import qs from 'query-string'
+
+export class NavLink extends React.Component {
+  getCurrentHref() {
+    const { url } = this.props
+    const query = qs.stringify(url.query)
+    let href = url.pathname
+
+    if (query !== '') {
+      href = `${href}?${query}`
+    }
+
+    return href
+  }
+
+  isSelected() {
+    const { href, aliases = [] } = this.props.info
+    const currentHref = this.getCurrentHref()
+
+    if (href === currentHref) return true
+    if (aliases.indexOf(currentHref) >= 0) return true
+
+    return false
+  }
+
+  render() {
+    const { info } = this.props
+
+    return (
+      <div>
+        <Link href={info.href} as={info.as || info.href}>
+          <a className={this.isSelected() ? 'selected' : ''}>{info.name}</a>
+        </Link>
+        <style jsx>{`
+          a {
+            text-decoration: none;
+            font-size: 14px;
+            color: #000;
+          }
+
+          a.selected {
+            font-weight: 600;
+            color: #000;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}
+
+export default class DocsNavbarDesktop extends React.Component {
+  renderPost(info, level) {
+    if (info.posts) {
+      return this.renderCategory(info, level + 1)
+    }
+
+    return (
+      <div className="link" key={info.href}>
+        <NavLink info={info} url={this.props.url} />
+        <style jsx>{`
+          .link {
+            margin: 10px 0;
+          }
+
+          @media screen and (max-width: 950px) {
+            .link {
+              padding: 20px 0;
+              margin: 0;
+              border-bottom: 1px solid #EEE;
+            }
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  renderCategory(info, level = 1) {
+    const levelClass = `level-${level}`
+    const postStyle = {
+      marginLeft: 10 * (level - 1)
+    }
+
+    return (
+      <div className={`category ${levelClass}`} key={info.name}>
+        <div className="label">
+          {info.href ? <NavLink info={info} url={this.props.url} /> : info.name}
+        </div>
+        <div className="posts" style={postStyle}>
+          {info.posts.map(postInfo => this.renderPost(postInfo, level))}
+        </div>
+        <style jsx>{`
+          .label {
+            margin: 0 0 15px 0;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 1.3px;
+            font-weight: 400;
+            color: #888;
+            cursor: default;
+          }
+
+          .level-2 .label {
+            font-size: 14px;
+            font-weight: 400;
+            margin: 10px 0;
+            text-transform: none;
+            letter-spacing: 0;
+            cursor: default;
+          }
+
+          .category.level-1 {
+            margin: 0 0 50px 0;
+          }
+
+          @media screen and (max-width: 950px) {
+            .label {
+              margin: -10px 0;
+            }
+
+            .level-2 .label {
+              padding: 20px 0;
+              margin: 0;
+              border-bottom: 1px solid #EEE;
+            }
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {data.map(categoryInfo => this.renderCategory(categoryInfo))}
+      </div>
+    )
+  }
+}

components/docs/navbar/mobile.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import DocsNavbarDesktop from './desktop'
+import Arrow from '../../arrow'
+
+export default class DocsNavbarMobile extends React.Component {
+  state = { show: false }
+
+  toggle() {
+    this.setState({ show: !this.state.show })
+  }
+
+  render() {
+    const { show } = this.state
+
+    return (
+      <div>
+        <div
+          className={show ? 'arrow show' : 'arrow'}
+          onClick={() => this.toggle()}
+        >
+          <Arrow />
+        </div>
+        {show ? <DocsNavbarDesktop {...this.props} /> : null}
+        <style jsx>{`
+          .arrow {
+            margin: 0 0 30px 0;
+            width: 27px;
+          }
+
+          .arrow.show {
+            transform: rotate(180deg);
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

components/freeze-page-scroll.js

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default class FreezePageScroll extends React.Component {
+  // Make sure to unfreeze when unmounting the component
+  componentWillUnmount() {
+    this.freezeScrolling(false)
+  }
+
+  // Make sure to freeze if unmounted and re-mounted again while mouse is
+  // still over the component
+  register(ref) {
+    if (!ref) return
+
+    const onMove = () => {
+      this.freezeScrolling(true)
+      ref.removeEventListener('mousemove', onMove)
+    }
+
+    ref.addEventListener('mousemove', onMove)
+  }
+
+  freezeScrolling(enable) {
+    const { body } = document
+    if (enable) {
+      // If already freezed we don't need to do anything
+      if (/body\-freeze\-scroll/.test(body.className)) return
+      body.className = `body-freeze-scroll ${body.className}`
+    } else {
+      body.className = body.className.replace('body-freeze-scroll', '').trim()
+    }
+  }
+
+  render() {
+    return (
+      <div
+        ref={r => this.register(r)}
+        onMouseEnter={() => this.freezeScrolling(true)}
+        onMouseLeave={() => this.freezeScrolling(false)}
+      >
+        {this.props.children}
+        <style jsx global>{`
+          .body-freeze-scroll {
+            overflow: hidden;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}