Add active link classes to site navigation menu (#463)

lib/core/BlogPageLayout.js

@@ -26,7 +26,11 @@ class BlogPageLayout extends React.Component {
     const perPage = this.props.metadata.perPage;
     const page = this.props.metadata.page;
     return (
-      <Site title="Blog" language="en" config={this.props.config}>
+      <Site
+        title="Blog"
+        language="en"
+        config={this.props.config}
+        metadata={{blog: true, blogListing: true}}>
         <div className="docMainWrapper wrapper">
           <BlogSidebar
             language={this.props.language}

lib/core/BlogPostLayout.js

@@ -79,7 +79,8 @@ class BlogPostLayout extends React.Component {
         title={this.props.metadata.title}
         language={'en'}
         description={this.getDescription()}
-        config={this.props.config}>
+        config={this.props.config}
+        metadata={{blog: true}}>
         <div className="docMainWrapper wrapper">
           <BlogSidebar
             language={'en'}

lib/core/DocsLayout.js

@@ -36,7 +36,8 @@ class DocsLayout extends React.Component {
         }
         description={content.trim().split('\n')[0]}
         language={metadata.language}
-        version={metadata.version}>
+        version={metadata.version}
+        metadata={metadata}>
         <div className="docMainWrapper wrapper">
           <DocsSidebar metadata={metadata} />
           <Container className="mainContainer">

lib/core/Site.js

@@ -75,6 +75,7 @@ class Site extends React.Component {
             title={this.props.config.title}
             language={this.props.language}
             version={this.props.version}
+            current={this.props.metadata}
           />
           <div className="navPusher">
             {this.props.children}

lib/core/nav/HeaderNav.js

@@ -9,6 +9,7 @@ const CWD = process.cwd();
 
 const React = require('react');
 const fs = require('fs');
+const classNames = require('classnames');
 const siteConfig = require(CWD + '/siteConfig.js');
 const translation = require('../../server/translation.js');
 const env = require('../../server/env.js');
@@ -97,6 +98,8 @@ class HeaderNav extends React.Component {
   // function to generate each header link, used with each object in siteConfig.headerLinks
   makeLinks(link) {
     let href;
+    let docItemActive = false;
+    let docGroupActive = false;
     if (link.search && this.props.config.algolia) {
       // return algolia search bar
       return (
@@ -153,6 +156,10 @@ class HeaderNav extends React.Component {
         throw new Error(errorStr);
       }
       href = this.props.config.baseUrl + Metadata[id].permalink;
+
+      const {id: currentID, sidebar} = this.props.current;
+      docItemActive = currentID && currentID === id;
+      docGroupActive = sidebar && sidebar === Metadata[id].sidebar;
     } else if (link.page) {
       // set link to page with current page's language if appropriate
       const language = this.props.language || '';
@@ -172,8 +179,16 @@ class HeaderNav extends React.Component {
       // set link to blog url
       href = this.props.baseUrl + 'blog';
     }
+    const itemClasses = classNames({
+      siteNavGroupActive:
+        (link.doc && docGroupActive) || (link.blog && this.props.current.blog),
+      siteNavItemActive:
+        docItemActive ||
+        (link.blog && this.props.current.blogListing) ||
+        (link.page && link.page === this.props.current.id),
+    });
     return (
-      <li key={link.label + 'page'}>
+      <li key={link.label + 'page'} className={itemClasses}>
         <a href={href} target={link.external ? '_blank' : '_self'}>
           {translation[this.props.language]
             ? translation[this.props.language]['localized-strings'][link.label]
@@ -279,4 +294,8 @@ class HeaderNav extends React.Component {
   }
 }
 
+HeaderNav.defaultProps = {
+  current: {},
+};
+
 module.exports = HeaderNav;