Merge pull request #24 from dailybruin/Michael/BottomNav

Michael/bottom nav
lgtm

src/components/ArticleTitle.tsx

@@ -5,7 +5,6 @@ import { css } from 'react-emotion'
 interface ArticleTitleProps {
   title: string
   byline: string
-  isMobile: boolean
 }
 
 interface ArticleTitleState {

src/components/BottomNav.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import { faArrowAltCircleDown } from '@fortawesome/free-solid-svg-icons'
+
+interface BottomNavProps {
+  atBeginning: boolean
+  atEnd: boolean
+  prevName: string
+  nextName: string
+}
+
+export class BottomNav extends React.Component<BottomNavProps> {
+  handleClick = (id: string) => {
+    // TODO: go to next/prev page
+  }
+  render() {
+    return (
+      <div
+        className={css`
+          color: black;
+          font-family: 'Open Sans Condensed';
+          font-style: normal;
+          font-weight: bold;
+          font-size: 2.5vw;
+          line-height: normal;
+          @media screen and (max-width: 800px) {
+            font-size: 20px;
+          }
+        `}
+      >
+        <p
+          className={css`
+            float: left;
+            padding-left: 10%;
+            @media screen and (max-width: 800px) {
+              padding-left: 5%;
+            }
+          `}
+        >
+          {
+            <img
+              className={css`
+                height: 24px;
+                @media screen and (max-width: 1100px) {
+                  height: 20px;
+                }
+                @media screen and (max-width: 900px) {
+                  height: 16px;
+                }
+              `}
+              src={require('../images/left-arrow.png')}
+            />
+          }
+          {this.props.prevName}
+        </p>
+        <p
+          className={css`
+            float: right;
+            padding-right: 10%;
+            @media screen and (max-width: 800px) {
+              padding-left: 5%;
+            }
+          `}
+        >
+          {this.props.nextName}
+          {
+            <img
+              className={css`
+                height: 24px;
+                @media screen and (max-width: 1100px) {
+                  height: 20px;
+                }
+                @media screen and (max-width: 900px) {
+                  height: 16px;
+                }
+              `}
+              src={require('../images/right-arrow.png')}
+            />
+          }
+        </p>
+      </div>
+    )
+  }
+}

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { graphql } from 'gatsby'
 import { ArticleTitle } from '../components/ArticleTitle'
+import { BottomNav } from '../components/BottomNav'
 import {
   Article,
   Byline,
@@ -98,9 +99,14 @@ const IndexPage = ({ data }) => (
     <ArticleTitle
       title="TITLE OF ARTICLE GOES HERE"
       byline="A BYLINE GOES HERE"
-      isMobile={false}
     />
     <Article dropcap={true} content={data.kerckhoffArticle.content} />
+    <BottomNav
+      atBeginning={false}
+      atEnd={false}
+      prevName="PREV: Name here"
+      nextName="NEXT: Name here"
+    />
     <Footer developers="Nathan Smith" copyrightYear={2018} />
   </>
 )