Update navbar and home comoponent

src/components/About.js

@@ -9,14 +9,14 @@ export default class About extends Component {
   render () {
     if (this.props.isLoading) {
       return (
-        <div className={contentStyle.contentWrapper}>
+        <div className={contentStyle.contentWrapper} id="about">
           <Spinner/>
         </div>
       );
     }
 
     return (
-      <div className={contentStyle.contentWrapper}>
+      <div className={contentStyle.contentWrapper} id="about">
         <Header header={"About"} />
         <div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
         </div>

src/components/Blog.js

@@ -9,7 +9,7 @@ export default class Blog extends Component {
   render() {
     if (this.props.isLoading) {
       return (
-        <div className={contentStyle.contentWrapper}>
+        <div className={contentStyle.contentWrapper} id="blog">
           <Spinner/>
         </div>
       );
@@ -27,7 +27,7 @@ export default class Blog extends Component {
     )
 
     return (
-      <div className={contentStyle.contentWrapper}>
+      <div className={contentStyle.contentWrapper} id="blog">
         <Header header={"Blog"} />
 
         <div className={contentStyle.content}>

src/components/Home.js

@@ -40,9 +40,14 @@ export default class Home extends Component {
           <div className={styles.menuLinks}>
             <ul>
               <li>
-                <Link to="/blog">
+                <a href="#about">
+                  <i className="fa fa-search" aria-hidden="true" /> About
+                </a>
+              </li>
+              <li>
+                <a href="#blog">
                   <i className="fa fa-pencil-square-o" aria-hidden="true" /> Blog
-                </Link>
+                </a>
               </li>
             </ul>
           </div>

src/components/Navbar.js

@@ -6,11 +6,52 @@ import styles from './Navbar.scss';
 export default class Navbar extends Component {
 
   render () {
+
+    let key = 0;
+    const objKeys = Object.keys(config.social);
+
+    const socialLinks = objKeys.map((val) => {
+      const link = (
+        <a key={key} href={config.social[val]}>
+          <i className={`fa fa-${val}`} aria-hidden="true" />
+          <span className="sr-only">{val}</span>
+        </a>
+      );
+      key += 1;
+      return link;
+    });
+
+    socialLinks.push(
+      <a key={key} href={`mailto:${config.email}`}>
+        <i className="fa fa-envelope-o" aria-hidden="true" />
+        <span className="sr-only">e-mail</span>
+      </a>,
+    );
+
     return (
       <div className={styles.navbar}>
+        <div className={styles.links}>
+          <ul>
+            <li>
               <a href='/'>
-          <h3>{config.name}</h3>
+                <span className={styles.nameLink}>{config.name} |</span>
               </a>
+            </li>
+            <li>
+              <a href='/#about'>
+                <span>About</span>
+              </a>
+            </li>
+            <li>
+              <a href='/#blog'>
+                <span>Blog</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className={styles.social}>
+          {socialLinks}
+        </div>
       </div>
     )
   }

src/components/Navbar.scss

@@ -6,10 +6,42 @@
   background-position: center;
   background-repeat: no-repeat;
   text-align: left;
-  padding: 2px;
+  overflow: auto;
 }
 
-h3 {
+h2 {
   color: $white;
   padding-left: 5px;
 }
+
+.social {
+  display: inline-block;
+  float: right;
+  vertical-align: bottom;
+  a {
+    color: $white;
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
+.links {
+  display: inline-block;
+  float: left;
+  ul {
+    list-style: none;
+    li {
+      font-family: $font-header;
+      display: inline;
+      margin: 5px;
+      a {
+        color: $white;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.nameLink {
+  font-size: 1.4em;
+}