message: SideNav tweaks
diff: import React from 'react'
  import {default as NextLink} from 'next/link'
  -import {Text, Box, Button} from '../../src'
  +import {Text, Box, Button, FlexContainer} from '../../src'
  import * as docs from '../components'
  const SideNav = () =>
  - <Box mt={4} ml={4} bg="gray.0">
  + <Box bg="gray.0">
  + <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
  <NextLink href="/getting-started">
  - <Text is="p" fontWeight='bold'>Getting Started</Text>
  + <Button linkStyle color="black" m={0} mb={3}>Getting Started</Button>
  </NextLink>
  <NextLink href="/system-props">
  - <Text is="p" fontWeight='bold'>System Props</Text>
  + <Button linkStyle color="black" m={0} mb={3}>System Props</Button>
  </NextLink>
  <NextLink href="/primer-theme">
  - <Text is="p" fontWeight='bold'>Primer Theme</Text>
  + <Button linkStyle color="black" m={0}>Primer Theme</Button>
  </NextLink>
  - <Box mt={2} mb={3}>
  - <Text is="p" fontWeight='bold'>Components</Text>
  - </Box>
  + </FlexContainer>
  + <Box pt={5} pl={5}>
  + <Text fontWeight="bold" is="p" color="black" m={0} mb={3}>Components</Text>
  {Object.values(docs).map(meta =>
  <Box mb={1}>
  <NextLink key={meta.displayName} href={`/components/${meta.displayName}`}>
  - <Button linkStyle pl={4}>{meta.displayName}</Button>
  + <Button linkStyle p={2} pl={4}>{meta.displayName}</Button>
  </NextLink>
  </Box>
  )}
  </Box>
  + </Box>
  export default SideNav
  