added navbar

src/App.js

@@ -1,18 +1,20 @@
 import React, { Component } from "react";
 import axios from "axios";
-import { Button } from "react-bootstrap";
 
-import Population from "./components/Population.jsx";
-import Invasions from "./components/Invasions.jsx";
-import SillyMeter from "./components/SillyMeter.jsx";
+// import Population from "./components/Population.jsx";
+// import Invasions from "./components/Invasions.jsx";
+// import SillyMeter from "./components/SillyMeter.jsx";
+import All from "./components/All.jsx";
+import Navbar from "./components/Navbar.jsx";
 
 class App extends Component {
  state = {
  invData: [],
  popData: [],
  sillyData: [],
  lastUpdate: "Updating...",
- mode: "Light"
+ mode: "Light",
+ version: "v0.2-beta"
  };
 
  loadData = async () => {
@@ -76,22 +78,19 @@ class App extends Component {
 
  render() {
  return (
- <div className="container py-2">
- <div className="row">
- <div className="col-5 text-left">
- <Invasions invData={this.state.invData} />
- </div>
- <div className="col-7 text-right">
- <Population popData={this.state.popData} />
- <hr />
- <SillyMeter sillyData={this.state.sillyData} />
- </div>
- </div>
- <div className="fixed-bottom text-center text-muted py-3">
- <Button variant="outline-info" size="sm" onClick={this.loadData}>
- {this.state.lastUpdate}
- </Button>
+ <div className="app">
+ <div className="container py-2">
+ <All
+ invData={this.state.invData}
+ popData={this.state.popData}
+ sillyData={this.state.sillyData}
+ />
  </div>
+ <Navbar
+ refresh={this.loadData}
+ lastUpdate={this.state.lastUpdate}
+ version={this.state.version}
+ />
  </div>
  );
  }

src/components/All.jsx

@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+
+import Population from "./Population.jsx";
+import Invasions from "./Invasions.jsx";
+import SillyMeter from "./SillyMeter.jsx";
+
+class All extends Component {
+ render() {
+ return (
+ <div className="row">
+ <div className="col-5 text-left">
+ <Invasions invData={this.props.invData} />
+ </div>
+ <div className="col-7 text-right">
+ <Population popData={this.props.popData} />
+ <hr />
+ <SillyMeter sillyData={this.props.sillyData} />
+ </div>
+ </div>
+ );
+ }
+}
+
+export default All;

src/components/Navbar.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { Button, Nav, Navbar } from "react-bootstrap";
+
+class NavBar extends Component {
+ render() {
+ return (
+ <Navbar bg="light" variant="light" fixed="bottom">
+ <Navbar.Brand href="/">Toontown Rewritten Dashboard</Navbar.Brand>
+ <Nav className="mr-auto">
+ <Nav.Link>All</Nav.Link>
+ <Nav.Link>Invasions</Nav.Link>
+ <Nav.Link>Population</Nav.Link>
+ <Nav.Link>Silly Meter</Nav.Link>
+ <Nav.Link disabled>Settings</Nav.Link>
+ </Nav>
+ <Navbar.Text>
+ {this.props.version} |{" "}
+ <Button
+ variant="outline-primary"
+ size="sm"
+ onClick={this.props.refresh}
+ >
+ {this.props.lastUpdate}
+ </Button>
+ </Navbar.Text>
+ </Navbar>
+ );
+ }
+}
+
+export default NavBar;