Move app from server

app/app.css

@@ -0,0 +1,37 @@
+section {
+    float: left;
+}
+
+#menu {
+    width: 13em;
+}
+#menu ul {
+    margin: 0;
+    padding: 0;
+}
+li.nav {
+    display: block;
+    line-height: 2.5em;
+    padding: 0 1em;
+    cursor: pointer;
+}
+.nav.empact {
+    font-weight: 600;
+}
+.nav.header {
+    color: #aaa;
+    cursor: default;
+}
+
+#content {
+    width: calc(100% - 13em);
+}
+#content .left, #content .right {
+    width: 50%;
+}
+#content .left {
+    background: #5500fa;
+}
+#content .right {
+    background: #fa0055;
+}

app/app.jsx

@@ -0,0 +1,32 @@
+var Menu = React.createClass({
+    getInitialState: function() {
+        return {teams: []};
+    },
+
+    componentDidMount: function() {
+        this.loadTeams();
+    },
+
+    loadTeams: function() {
+        $.get(this.props.api, function(res){
+            this.setState({teams: res})
+        }.bind(this));
+    },
+
+    render: function() {
+        var renderTeam = function(team) {
+            return (
+                <li className="nav team">{team.name}</li>
+            )
+        };
+        return (
+            <ul>
+                <li className="nav empact">Empact</li>
+                <li className="nav dash">Dashboard</li>
+                <li className="nav repos">Repos</li>
+                <li className="nav header">Teams:</li>
+                {this.state.teams.map(renderTeam)}
+            </ul>
+        );
+    }
+});

app/hello.css

@@ -0,0 +1,29 @@
+* {
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    font-weight: 400;
+}
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    position: absolute;
+    left: 15%;
+    top: 20%;
+    width: 70%;
+    text-align: center;
+    color: #aaa;
+}
+
+a {
+    position: absolute;
+    top: 40%;
+    width: 100%;
+    text-align: center;
+}
+
+img {
+    width: 60px;
+}