message: Adding active style to side nav links
diff: import React from 'react'
  +import {withRouter} from 'next/router'
  import {default as NextLink} from 'next/link'
  import {Text, Box, Link, FlexContainer, Relative} from '../../src'
  import * as docs from '../components/docs'
  -const SideNav = () => (
  +const getLink = router => {
  + return Object.values(docs).map(({displayName: name}) => {
  + const isSelected = router.pathname === `/components/docs/${name}`
  + return (
  + <Box mb={3} key={name}>
  + <NextLink href={`/components/docs/${name}`}>
  + <Link nounderline href={`/components/docs/${name}`} color={isSelected ? 'gray.9' : null} fontSize={5} fontWeight={isSelected ? 'bold' : null}>
  + {name}
  + </Link>
  + </NextLink>
  + </Box>
  + )
  + })
  +}
  +
  +const SideNav = ({router}) => (
  <Relative>
  <Box width={256} height="100%" bg="gray.0" display="inline-block" borderRight={1} borderColor="gray.2">
  <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
  @@ -26,18 +42,10 @@ const SideNav = () => (
  </Link>
  </NextLink>
  </Text>
  - {Object.values(docs).map(({displayName: name}) => (
  - <Box mb={3} key={name}>
  - <NextLink href={`/components/docs/${name}`}>
  - <Link nounderline href={`/components/docs/${name}`} className="f5">
  - {name}
  - </Link>
  - </NextLink>
  - </Box>
  - ))}
  + {getLink(router)}
  </Box>
  </Box>
  </Relative>
  )
  -export default SideNav
  +export default withRouter(SideNav)
  