Init

components/BlogNav/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { RouteHandler, Link } from 'react-router'
+import { link } from 'gatsby-helpers'
+
+import './style.sss'
+
+class BlogNav extends React.Component {
+  render() {
+  	const { location } = this.props
+    return (
+      <nav className='blog-nav'>
+        <ul>
+          <li>
+            <Link to="/" className={location.pathname === link('/')?"current":null}>Articles</Link>
+          </li>
+          <li>
+            <Link to="/about" className={location.pathname === link('/about')?"current":null}>About me</Link>
+          </li>
+          <li>
+            <Link to="/contact" className={location.pathname === link('/contact')?"current":null}>Contact me</Link>
+          </li>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+ BlogNav.propTypes = {
+  location: React.PropTypes.object,
+}
+
+export default BlogNav

components/BlogNav/style.sss

@@ -0,0 +1,23 @@
+.blog-nav
+  margin: 20px 0px 10px
+
+.blog-nav ul
+  list-style: none
+  padding-left: 0
+
+.blog-nav ul li
+  margin: 10px 0 10px
+
+.blog-nav ul li a
+  font-size: 16px
+  line-heigh: 26px
+  margin-bottom: 26px
+  border-bottom: 0
+  font-weight: 400
+  color: #222
+
+.blog-nav ul li a.current
+  border-bottom: 1px solid
+
+.blog-nav ul li a:hover
+  border-bottom: 1px solid