Better bootstrap usage on the NavBar

- woo CSS

.gitignore

@@ -17,4 +17,4 @@ __pycache__/
 go/sourceme.sh
 .DS_STORE
 node_modules/
-go/static/
+go/static/main.js

go/go_ahead/src/Components/Organisms/NavBar.jsx

 import React from "react";
-import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from "reactstrap";
+import {
+  Container,
+  Navbar,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+  NavbarToggler,
+  Collapse
+} from "reactstrap";
 
-const NavBar = props => (
-  <div>
-    <Navbar color="dark" dark expand="md">
-      <NavbarBrand href="#">Go</NavbarBrand>
+class NavBar extends React.Component {
+  constructor(props) {
+    super(props);
 
-      <Nav className="ml-auto" navbar>
-        <NavItem>
-          <NavLink href="#/dhaynes" active={props.page == "dhaynes"}>
-            Dhaynes
-          </NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink href="#/about" active={props.page == "about"}>
-            About
-          </NavLink>
-        </NavItem>
-      </Nav>
-    </Navbar>
-  </div>
-);
+    this.toggleNavbar = this.toggleNavbar.bind(this);
+    this.state = {
+      collapsed: true
+    };
+  }
+
+  toggleNavbar() {
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  }
+
+  render() {
+    const { page } = this.props;
+    return (
+      <Navbar dark color="dark" expand="md">
+        <Container>
+          <NavbarBrand href="#/">
+            <img
+              src="static/go.svg"
+              className="d-inline-block align-top"
+              width="30"
+              height="30"
+              alt="SRCT Go"
+            />
+            Go
+          </NavbarBrand>
+          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
+          <Collapse isOpen={!this.state.collapsed} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="#/dhaynes" active={page == "dhaynes"}>
+                  Dhaynes
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#/about" active={page == "about"}>
+                  About
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#/debug" active={page == "debug"}>
+                  Debug
+                </NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Container>
+      </Navbar>
+    );
+  }
+}
 
 export default NavBar;

go/go_ahead/src/Components/Templates/PageTemplate.jsx

 import React from "react";
-
 import { NavBar } from "Components";
+import { Container } from "reactstrap";
 
 const PageTemplate = props => (
   <div>
     <NavBar page={props.page} />
-    <div>{props.children}</div>
+    <Container>{props.children}</Container>
   </div>
 );
 

go/static/go.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2100 2100" enable-background="new 0 0 2100 2100" xml:space="preserve">
+<g>
+	<polygon fill="none" points="1299,908.2 1299,1221.6 1295.3,1223.7 1023,1380.4 1023,1446.7 1299,1606.1 1351.5,1636.4 
+		1680,1446.7 1680,1126.7 1680,1067.5 1352.2,878.2 1352.2,878.2 1351.6,877.9 1351.6,877.9 1350.2,878.7 1300.4,907.5 
+		1299.2,908.2 1299.1,908.2 	"/>
+	<polygon fill="none" points="988.4,1046.6 1019.7,1064.7 1023.8,1067.1 1019.7,1064.7 	"/>
+	<polygon fill="#FBB03B" points="1352.1,560.5 1352,560.4 1024.3,749.6 1077.1,780.1 1214.7,859.5 1299,908.1 1299.2,908.2 
+		1300.4,907.5 1350.2,878.7 1351.6,877.9 1351.6,877.9 1351.6,877.9 1352.2,878.2 1352.2,878.2 1680,1067.5 1680,1126.7 
+		1680,1446.7 1351.5,1636.4 1299,1606.1 1023,1446.7 1023,1380.4 1023,1221.6 1023,1067.5 1023.8,1067.1 1019.7,1064.7 
+		988.4,1046.6 749.1,908.4 749.1,908.4 749,908.6 749,1220.9 749,1379.7 749,1538.6 749,1605.6 1352,1954.1 1955,1605.6 1955,908.6 
+			"/>
+	<polygon fill="#FBB03B" points="749.1,908.4 749.1,908.4 749.1,908.4 	"/>
+	<polygon fill="#FBB03B" points="1680,1067.5 1352.2,878.2 1352.2,878.2 1352.2,878.2 	"/>
+	<polygon fill="#FBB03B" points="1351.6,877.9 1350.2,878.7 1351.6,877.9 	"/>
+	<polygon fill="#006837" points="749.2,908.4 749.1,908.4 988.4,1046.6 855.9,969.9 	"/>
+	<polygon fill="#006837" points="855.9,969.9 749.3,908.3 749.2,908.4 	"/>
+	<polygon fill="#006837" points="1024,749.4 1023.9,749.4 1023.9,749.4 1024.3,749.6 1024.3,749.6 	"/>
+	<polygon fill="#006837" points="749.2,908.4 749.2,908.3 749.1,908.4 749.1,908.4 	"/>
+	<polygon fill="#006837" points="749.3,908.3 749.2,908.2 749.2,908.3 749.2,908.4 	"/>
+	<polygon fill="#006837" points="1214.6,859.5 1299,908.2 1299,908.1 1214.7,859.5 1077.1,780.1 1024.3,749.6 1024.3,749.6 
+		1077.1,780.1 	"/>
+	<polygon fill="#006837" points="1299.1,908.2 1299.2,908.2 1299,908.1 1299,908.2 	"/>
+	<polygon fill="#006837" points="988.4,1046.6 1019.7,1064.7 1023.8,1067.1 1023,1067.5 1023,1221.6 1023,1380.4 1295.3,1223.7 
+		1299,1221.6 1299,908.2 1214.6,859.5 1077.1,780.1 1024.3,749.6 749.3,908.3 855.9,969.9 	"/>
+	<polygon fill="#006837" points="749,1220.9 420,1031.6 420,657.1 420,652.4 748.5,462.8 752.7,465.1 1066.2,646.1 1203.8,566.7 
+		1341.4,487.2 1027.9,306.2 748.6,145 145,493.5 145,1190.5 749,1538.6 749,1379.7 	"/>
+</g>
+</svg>