docs(sidebar): style sidebar links

reactstrap · Mar 24, 2016 · 29e4614 · 29e4614
1 parent 13efbe6
commit 29e4614
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/docs/lib/Components/index.jsx b/docs/lib/Components/index.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from 'reactstrap';
 import { Link } from 'react-router';
 import UI from '../UI';
 
@@ -12,11 +11,13 @@ class Components extends React.Component {
         <div className="content container-fluid">
           <div className="row">
             <div className="col-md-3 col-md-push-9">
-              <ul className="nav">
-                <li className="nav-item">
-                  <Link className="nav-link" to="/components/buttons">Buttons</Link>
-                </li>
-              </ul>
+              <div className="docs-sidebar">
+                <ul className="nav">
+                  <li className="nav-item">
+                    <Link className="nav-link" to="/components/buttons" activeClassName="active">Buttons</Link>
+                  </li>
+                </ul>
+              </div>
             </div>
             <div className="col-md-9 col-md-pull-3" {...this.props}/>
           </div>

diff --git a/docs/static/docs.css b/docs/static/docs.css
@@ -123,6 +123,24 @@ pre, code {
   float: left;
 }
 
+.docs-sidebar .nav-item {
+  padding: .2rem 0 .2rem 0;
+}
+
+.docs-sidebar .nav-link {
+  color: #888;
+  padding: .3rem .5rem .3rem 1rem;
+  border-left: 2px solid transparent;
+}
+
+.docs-sidebar .nav-link:hover {
+  color: #777
+}
+
+.docs-sidebar .nav-link.active {
+  color: #666;
+  border-left: 2px solid #d9534f;
+}
 
 
 /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+jsx */