Reimplement TopBar

src/components/App.js

@@ -8,6 +8,7 @@ import * as Colors from "material-ui/colors";
 
 import SideBar from "components/SideBar";
 import ControlMap from "components/ControlMap";
+import TopBar from "components/TopBar";
 
 export type AppProps = {
   config: Config
@@ -42,12 +43,13 @@ class App extends React.Component<AppProps & Classes> {
     return this.props.config.controls[this.state.selectedControl];
   }
 
-  // <SpaceMapBar title={`${this.props.config.space.name} Map`} />
   render() {
     return (
       <div>
         <MuiThemeProvider theme={this.theme}>
           <div>
+            <TopBar title={`${this.props.config.space.name} Map`}
+              connected={false} />
             {false && <SideBar />}
           </div>
         </MuiThemeProvider>

src/components/TopBar.js

@@ -0,0 +1,42 @@
+// @flow
+import React from "react";
+
+import AppBar from "material-ui/AppBar";
+import Toolbar from "material-ui/Toolbar";
+import Typography from "material-ui/Typography";
+import { CircularProgress } from "material-ui/Progress";
+
+export type TopBarProps = {
+  title: string,
+  connected: boolean
+};
+
+export type TopBarState = {
+
+};
+
+export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+  constructor(props: TopBarProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AppBar position="static">
+        <Toolbar>
+          {this.renderConnectionIndicator()}
+          <Typography type="title">{this.props.title}</Typography>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+
+  renderConnectionIndicator() {
+    if (this.props.connected) {
+      return (<i style={{fontSize: 48}} className="mdi mdi-map"></i>);
+    }
+    return (
+      <CircularProgress size={48} style={{color: "rgba(0, 0, 0, 0.54)"}} />
+    );
+  }
+}