Adding active style to side nav links

pages/doc-components/Header.js

@@ -1,10 +1,11 @@
 import React from 'react'
+import {withRouter} from 'next/router'
 import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
 import NextLink from 'next/link'
 import BoxShadow from './BoxShadow'
 import {Text, FlexContainer, Link, Sticky} from '../../src'
 
-const Header = () => (
+const Header = ({router}) => (
   <Sticky zIndex={100}>
     <BoxShadow py={3} bg="gray.9" color="white">
       <FlexContainer className="p-responsive" alignItems="center" justifyContent="space-between">
@@ -18,12 +19,25 @@ const Header = () => (
         </NextLink>
         <div>
           <NextLink href="/components">
-            <Link nounderline className="text-white" href="/components" px={4}>
+            <Link
+              nounderline
+              className="text-white"
+              href="/components"
+              px={4}
+              fontWeigt={router.pathname === '/components' ? 'bold' : null}
+            >
               Docs
             </Link>
           </NextLink>
           <NextLink href="/components/sandbox">
-            <Link nounderline className="text-white" href="/components/sandbox" mr={0} px={4}>
+            <Link
+              nounderline
+              className="text-white"
+              href="/components/sandbox"
+              mr={0}
+              px={4}
+              fontWeigt={router.pathname === '/components/sandbox' ? 'bold' : null}
+            >
               Sandbox
             </Link>
           </NextLink>
@@ -33,4 +47,4 @@ const Header = () => (
   </Sticky>
 )
 
-export default Header
+export default withRouter(Header)

pages/doc-components/SideNav.js

@@ -1,43 +1,75 @@
 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={1}>
+            {name}
+          </Link>
+        </NextLink>
+      </Box>
+    )
+  })
+}
+
+const isComponentLink = componentName => {
+  return Object.values(docs)
+    .map(n => n.displayName)
+    .includes(componentName)
+}
+
+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">
         <NextLink href="/components/docs/system-props">
-          <Link nounderline scheme="gray-dark" href="/components/docs/system-props" m={0} mb={4}>
+          <Link
+            nounderline
+            scheme="gray-dark"
+            href="/components/docs/system-props"
+            m={0}
+            mb={4}
+            fontWeight={router.pathname === '/components/docs/system-props' ? 'bold' : null}
+          >
             System Props
           </Link>
         </NextLink>
         <NextLink href="/components/docs/primer-theme">
-          <Link nounderline scheme="gray-dark" href="/components/docs/primer-theme" m={0}>
+          <Link
+            nounderline
+            scheme="gray-dark"
+            href="/components/docs/primer-theme"
+            m={0}
+            fontWeight={router.pathname === '/components/docs/primer-theme' ? 'bold' : null}
+          >
             Primer Theme
           </Link>
         </NextLink>
       </FlexContainer>
       <Box pt={5} pl={5}>
         <Text is="p" color="black" m={0} mb={3}>
           <NextLink href="/components/docs/Avatar">
-            <Link nounderline scheme="gray-dark" href="/components/docs/Avatar">
+            <Link
+              nounderline
+              scheme="gray-dark"
+              href="/components/docs/Avatar"
+              fontWeight={isComponentLink(router.pathname.replace('/components/docs/', '')) ? 'bold' : null}
+            >
               Components
             </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)

src/Link.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'react-emotion'
 import {themeGet} from 'styled-system'
-import {withSystemProps, COMMON} from './system-props'
+import {withSystemProps, TYPOGRAPHY} from './system-props'
 import {colors} from './theme'
 
 const styledLink = styled(Link)`
@@ -45,4 +45,4 @@ Link.propTypes = {
   scheme: PropTypes.oneOf(['gray', 'gray-dark'])
 }
 
-export default withSystemProps(styledLink, COMMON)
+export default withSystemProps(styledLink, TYPOGRAPHY)