Merge pull request #11 from Nona-Creative/feat/adding-header-navigation-scrollto

Adding page header nav and scroll to

components/browseArchives/index.js

@@ -118,7 +118,7 @@ class BrowseArchives extends React.Component {
     } = this.state;
 
     return (
-      <div className="browse-wrap">
+      <div className="browse-wrap" id="browse">
         <SearchBar
           onSearchInputChange={this.onSearchInputChange}
           clearSearchInput={this.clearSearchInput}

components/pageHeader/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
 import './style.scss';
 
-export default () => (
+const PageHeader = () => (
   <div className="page-header">
     <div className="container">
       <h1>Ethereum Report</h1>
@@ -9,6 +10,13 @@ export default () => (
         We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
         Ethereum ecosystem
       </p>
+
+      <nav className="page-header-nav">
+        <AnchorLink offset="24" href="#resources">Resources</AnchorLink>
+        <AnchorLink offset="24" href="#browse">Browse Archives</AnchorLink>
+      </nav>
     </div>
   </div>
 );
+
+export default PageHeader;

components/pageHeader/style.scss

@@ -11,4 +11,21 @@
     font-family: $secondary-font;
     font-size: calculateRem(36);
   }
+
+  p {
+    margin-bottom: calculateRem(24);
+  }
+}
+
+.page-header-nav {
+
+  a {
+    color: $text-color;
+    text-decoration: none;
+    margin: 0 calculateRem(16);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }

components/resources/index.js

@@ -53,7 +53,7 @@ class Resources extends React.Component {
     };
 
     return (
-      <div className="resources-wrap">
+      <div className="resources-wrap" id="resources">
         <div className="container">
           <h2>Resources</h2>
           <div className="wordclouds-wrap">

package-lock.json

@@ -7380,6 +7380,11 @@
         "prop-types": "15.6.2"
       }
     },
+    "react-anchor-link-smooth-scroll": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.10.tgz",
+      "integrity": "sha512-CTzSJC/0Tf+EhVAswJeRwazcIGBnnnPEWiPM1uNXLaW+5MKe8v48Lm8auIahlmIeTJCYTAIfXSfZBu3S1Dlbbg=="
+    },
     "react-dom": {
       "version": "16.4.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.1.tgz",

package.json

@@ -43,6 +43,7 @@
     "node-sass": "^4.9.0",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
+    "react-anchor-link-smooth-scroll": "^1.0.10",
     "react-dom": "^16.3.2",
     "react-slick": "^0.23.1"
   },