Mark article as active in summary

4 files changed, 31 insertions, 10 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Summary.less b/packages/gitbook-plugin-theme-default/less/Summary.less
index d7cdae5..b57a403 100644
--- a/packages/gitbook-plugin-theme-default/less/Summary.less
+++ b/packages/gitbook-plugin-theme-default/less/Summary.less
@@ -33,5 +33,12 @@
 
     a:hover {
         text-decoration: underline;
+        color: @summary-article-hover-color;
+    }
+
+    &.active, {
+        a {
+            color: @summary-article-hover-color;
+        }
     }
 }
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index 8f16632..a988847 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -1,8 +1,9 @@
 // Sidebar
-@sidebar-background:        rgb(250, 250, 250);
-@sidebar-border-color:      rgba(0, 0, 0, 0.0666667);
+@sidebar-background:          rgb(250, 250, 250);
+@sidebar-border-color:        rgba(0, 0, 0, 0.0666667);
 // Summary
-@summary-header-color:      #939da3;
-@summary-article-padding-v: 10px;
-@summary-article-padding-h: 15px;
-@summary-article-color:     hsl(207, 15%, 25%);
+@summary-header-color:        #939da3;
+@summary-article-padding-v:   10px;
+@summary-article-padding-h:   15px;
+@summary-article-color:       hsl(207, 15%, 25%);
+@summary-article-hover-color: hsl(207, 100%, 50%);
diff --git a/packages/gitbook-plugin-theme-default/package.json b/packages/gitbook-plugin-theme-default/package.json
index a98fae9..349bace 100644
--- a/packages/gitbook-plugin-theme-default/package.json
+++ b/packages/gitbook-plugin-theme-default/package.json
@@ -12,6 +12,7 @@
     "react": "^15.3.1"
   },
   "devDependencies": {
+    "classnames": "^2.2.5",
     "font-awesome": "^4.6.3",
     "gitbook-markdown-css": "^1.0.1",
     "gitbook-plugin": "*",
diff --git a/packages/gitbook-plugin-theme-default/src/components/Summary.js b/packages/gitbook-plugin-theme-default/src/components/Summary.js
index 8c5c4a1..ba21a04 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Summary.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Summary.js
@@ -1,23 +1,35 @@
 const React = require('react');
+const classNames = require('classnames');
 const GitBook = require('gitbook-core');
 
-const SummaryArticle = React.createClass({
+let SummaryArticle = React.createClass({
     propTypes: {
+        active: React.PropTypes.bool,
         article: GitBook.Shapes.SummaryArticle
     },
 
     render() {
-        const { article } = this.props;
+        const { article, active } = this.props;
+        const className = classNames('SummaryArticle', {
+            active
+        });
 
         return (
             <GitBook.InjectedComponent matching={{ role: 'summary:article' }} props={this.props}>
-                <li className="SummaryArticle">
-                    <span>{article.title}</span>
+                <li className={className}>
+                    {article.ref ?
+                        <GitBook.Link to={article}>{article.title}</GitBook.Link>
+                        : <span>{article.title}</span>}
                 </li>
             </GitBook.InjectedComponent>
         );
     }
 });
+SummaryArticle = GitBook.connect(SummaryArticle, ({page}, {article}) => {
+    return {
+        active: page.level === article.level
+    };
+});
 
 const SummaryArticles = React.createClass({
     propTypes: {