Navbar and Section Components

package.json

@@ -47,7 +47,10 @@
     "express": "^4.16.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-icons-kit": "^1.0.7",
     "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2"
+    "react-router-dom": "^4.2.2",
+    "react-scroll": "^1.6.4",
+    "react-sidenav": "^2.1.2"
   }
 }

src/components/Navbar/Navbar.react.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav';
+import SvgIcon from 'react-icons-kit';
+import Scroll, {Link, Element} from 'react-scroll'
+let scroller = Scroll.scroller;
+import {ic_aspect_ratio} from 'react-icons-kit/md/ic_aspect_ratio';
+import {ic_question_answer} from 'react-icons-kit/md/ic_question_answer';
+import {ic_person} from 'react-icons-kit/md/ic_person';
+
+import styles from './Navbar.scss';
+import globals from "stylesheets/globals.scss";
+
+export default class Navbar extends React.Component {
+  //specify the base color/background of the parent container if needed
+  render(){
+    return(
+      <div className = {styles.navbar}>
+          <SideNav
+            highlightBgColor='#8EEEFF'
+            highlightColor='white'
+            onItemSelection={ (id, parent) =>
+              {
+                scroller.scrollTo(this.props.sections.find(section => section.text === id).sectionID,
+                {
+                  duration: 800,
+                  delay: 0
+                }
+                );
+              }
+            }
+          >
+            {this.props.sections.map((section) =>
+                <Nav class = {styles.nav} id={section.text} key={section.sectionID}>
+                  {/*<NavIcon><SvgIcon size={20} icon={section.icon}/></NavIcon>*/}
+                  <NavText> {section.text} </NavText>
+                </Nav>
+            )}
+          </SideNav>
+      </div>
+    )
+  }
+}

src/components/Navbar/Navbar.scss

@@ -0,0 +1,12 @@
+@import "stylesheets/globals.scss";
+
+.navbar {
+  background: $darkBlue;
+  text-align: left;
+  color: white;
+  width: 20;
+}
+
+.nav {
+  background: white;
+}

src/components/Section/Section.react.js

@@ -1,16 +1,11 @@
 import React from 'react';
-import styles from 'components/Section/Section.scss';
+import Scroll, {Link, Element} from 'react-scroll'
+import PropTypes from 'prop-types';
 
 export default class Section extends React.Component {
-  render() {
-    return (
-      <div>
-      <div id={this.props.id}>
-        <h1>{this.props.title}</h1>
-        <p>{this.props.content}</p>
-      </div>
-      </div>
-    )
+  render(){
+    return(
+      <Element name = {this.props.scrollID}/>
+    );
   }
-
 }

src/stylesheets/globals.scss

@@ -4,6 +4,7 @@ $spacingMargin: 24px;
 $black: #101010;
 $darkBlue: #133b70;
 $red: #ff6477;
+$lightBlue: #8EEEFF;
 
 @mixin PrimaryFont {
   font-family: 'Libre Baskerville', serif;