add Navbar

src/containers/NavBar.css

@@ -0,0 +1,14 @@
+.custom-toggler.navbar-toggler {
+    border-color:#007bff;
+}
+
+.navbar-brand {
+    font-weight: bolder;
+    font-size: 20px;
+}
+
+.custom-toggler .navbar-toggler-icon {
+    
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(9,55,150, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+
+} 

src/containers/NavBar.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+import './NavBar.css';
+
+import {
+  Container,
+  Collapse,
+  Navbar,
+  NavbarBrand,
+  NavbarToggler,
+  Nav,
+  NavItem,
+  NavLink,
+  Button
+} from 'reactstrap';
+
+class NavBar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: false
+    };
+
+    // binding
+    this.toggle = this.toggle.bind(this);
+    this.closeNavbar = this.closeNavbar.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+
+  closeNavbar() {
+    this.setState({
+      isOpen: false
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Navbar fixed="top" color="white" expand="sm" className="shadow-sm p-3 mb-5 bg-white rounded">
+
+          <Container>
+            <NavbarBrand onClick={this.closeNavbar} tag={Link} to="/">tick3t</NavbarBrand>
+            <NavbarToggler className="custom-toggler" onClick={this.toggle} />
+            
+            <Collapse isOpen={this.state.isOpen} navbar>
+              <Nav className="mr-auto" navbar>
+
+                <NavItem>
+                  <NavLink onClick={this.closeNavbar} tag={Link} to="/stats">Stats</NavLink>
+                </NavItem>
+
+                <NavItem>
+                  <NavLink onClick={this.closeNavbar} tag={Link} to="/stats">Credits</NavLink>
+                </NavItem>
+
+              </Nav>
+
+              <Nav className="ml-auto">
+                <NavItem>
+                  <Button color="primary" onClick={this.closeNavbar} tag={Link} to="/login">Admin</Button>
+                </NavItem>
+              </Nav>
+            </Collapse>
+          </Container>
+        </Navbar>
+
+
+
+      </div>
+    )
+  }
+}
+
+export default NavBar;