added Navbar

src/App.js

@@ -5,6 +5,7 @@ import Amplify from "aws-amplify";
 import awsmobile from "./aws-exports";
 import { withAuthenticator } from "aws-amplify-react"; //wraps app in authentication
 import S3ImageUpload from "./components/ImageUpload"; //for image viewing and uploading to S3 bucket
+import HeadNavbar from "./components/Navbar"
 
 Amplify.configure(awsmobile);
 
@@ -12,13 +13,7 @@ Amplify.configure(awsmobile);
     render() {
       return (
         <div className="App">
-          <header className="App-header">
-            <img src={logo} className="App-logo" alt="logo" />
-            <h1 className="App-title">Welcome to React</h1>
-          </header>
-          <p className="App-intro">
-            To get started, edit <code>src/App.js</code> and save to reload.
-          </p>
+          <HeadNavbar />
           <S3ImageUpload/>
           {/* <button onClick="" /> */}
         </div>

src/components/Navbar.js

@@ -0,0 +1,94 @@
+import React, { Component } from "react";
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem
+} from "reactstrap";
+import logo from "../images/logo.png";
+import {
+  BrowserRouter as Router,
+  Route,
+  Link,
+  Redirect
+} from "react-router-dom";
+import Team from "./Team";
+
+export default class HeadNavbar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div id="top">
+        <Navbar className="navbar clearfix" light expand="md">
+          <NavbarBrand href="/">
+            <img src={logo} className="App-logo" alt="logo" />
+          </NavbarBrand>
+          <NavbarToggler onClick={this.toggle} />
+
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav />
+            <Router>
+              <Nav className="ml-auto" navbar>
+                <NavLink>
+                  <Link to="/team" replace >Team</Link>
+                </NavLink>
+
+                <NavLink href="https://secretmakerfan.tumblr.com/post/175462362450/how-to-make-a-physical-product-guide">
+                  {" "}
+                  Blog{" "}
+                </NavLink>
+                <NavLink href="https://innovationdrive/sign-in">
+                  {" "}
+                  Sign In{" "}
+                </NavLink>
+                <button className="btn btn-danger float-right">
+                  Download Invention Workbook
+                </button>
+
+                {/* <NavItem> */}
+                {/* <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
+              </NavItem>
+              <UncontrolledDropdown nav inNavbar>
+                <DropdownToggle nav caret>
+                  Options
+                </DropdownToggle>
+                <DropdownMenu right>
+                  <DropdownItem>
+                    Option 1
+                  </DropdownItem>
+                  <DropdownItem>
+                    Option 2
+                  </DropdownItem>
+                  <DropdownItem divider />
+                  <DropdownItem>
+                    Reset
+                  </DropdownItem>
+                </DropdownMenu>
+              </UncontrolledDropdown> */}
+              </Nav>
+            </Router>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}