Version 1.0

components/SiteNav/index.jsx

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

components/SiteNav/style.css

@@ -0,0 +1,24 @@
+.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;
+}