Merge pull request #281 from primer/side_nav_active_style

Adding active style to side nav links
primer · Sep 27, 2018 · 15193c9 · 15193c9
2 parents 08e6256 + 9aa313a
commit 15193c9
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 18 deletions.
diff --git a/pages/doc-components/Header.js b/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 '../..'
 
-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,23 @@ const Header = () => (
         </NextLink>
         <div>
           <NextLink href="/components">
-            <Link color="white" href="/components" px={4}>
+            <Link
+              color="white"
+              href="/components"
+              px={4}
+              fontWeight={router.pathname === '/components' ? 'bold' : null}
+            >
               Docs
             </Link>
           </NextLink>
           <NextLink href="/components/sandbox">
-            <Link color="white" href="/components/sandbox" mr={0} px={4}>
+            <Link
+              color="white"
+              href="/components/sandbox"
+              mr={0}
+              px={4}
+              fontWeight={router.pathname === '/components/sandbox' ? 'bold' : null}
+            >
               Sandbox
             </Link>
           </NextLink>
@@ -33,4 +45,4 @@ const Header = () => (
   </Sticky>
 )
 
-export default Header
+export default withRouter(Header)
diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
@@ -1,43 +1,72 @@
 import React from 'react'
+import {withRouter} from 'next/router'
 import {default as NextLink} from 'next/link'
 import {Text, Box, Link, FlexContainer, Relative} from '../..'
 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 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 color="gray.9" href="/components/docs/system-props" m={0} mb={4}>
+          <Link
+            color="gray.9"
+            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 color="gray.9" href="/components/docs/primer-theme" m={0}>
+          <Link
+            color="gray.9"
+            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 color="gray.9" href="/components/docs/Avatar">
+            <Link
+              color="gray.9"
+              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 href={`/components/docs/${name}`} className="f5">
-                {name}
-              </Link>
-            </NextLink>
-          </Box>
-        ))}
+        {getLink(router)}
       </Box>
     </Box>
   </Relative>
 )
 
-export default SideNav
+export default withRouter(SideNav)