Add a simple header/nav-bar fixes gatsbyjs#2

pragmaticpat · Mar 13, 2016 · 5741929 · 5741929
1 parent 9d55a8e
commit 5741929
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "react": "^0.14.7",
     "react-document-title": "^2.0.1",
     "react-dom": "^0.14.7",
+    "react-headroom": "^1.8.0",
     "react-responsive-grid": "^0.3.0",
     "react-router": "^2.0.0",
     "safe-access": "^0.1.0",

diff --git a/pages/_template.jsx b/pages/_template.jsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import { Container } from 'react-responsive-grid'
+import { Link } from 'react-router'
+import Headroom from 'react-headroom'
 
 import { rhythm } from 'utils/typography'
 
@@ -12,6 +14,32 @@ module.exports = React.createClass({
   render () {
     return (
       <div>
+        <Headroom
+          wrapperStyle={{
+            marginBottom: rhythm(1),
+          }}
+          style={{
+            background: 'lightgray',
+            padding: rhythm(1),
+          }}
+        >
+          <Container
+            style={{
+              maxWidth: 960,
+              paddingTop: 0,
+            }}
+          >
+            <Link
+              to="/"
+              style={{
+                color: 'black',
+                textDecoration: 'none',
+              }}
+            >
+              Gatsby!!!
+            </Link>
+          </Container>
+        </Headroom>
         <Container
           style={{
             maxWidth: 960,