less hacking way of pulling poe data

app/components/navbar/navbar.scss

@@ -0,0 +1,10 @@
+@import '../../scss/variables.scss';
+
+.navbar {
+  background: $dark2;
+  border-bottom: 1px solid $dark1;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}

app/components/navbar/navbar.tsx

@@ -0,0 +1,68 @@
+import { inject, observer } from 'mobx-react';
+import React from 'react';
+import { AppStore } from '../../stores/app.store';
+import './navbar.scss';
+
+interface IProps {
+  appStore?: AppStore;
+}
+
+@inject('appStore')
+@observer
+export class Navbar extends React.Component<IProps, any> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  onLeagueSelect = (event: any) => {
+    this.props.appStore!.setActiveLeague(event.target.value);
+  };
+
+  onStashSelect = (event: any) => {
+    this.props.appStore!.loadItems(event.target.value);
+  };
+
+  renderStashTabSelector() {
+    const { stashTabs } = this.props.appStore!;
+    if (stashTabs.length < 1) {
+      return null;
+    }
+    return (
+      <select defaultValue={stashTabs[0].n} onChange={this.onStashSelect}>
+        {stashTabs.map((v, k) => (
+          <option key={k} value={k}>
+            {v.n}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  renderLeagueSelector() {
+    const { activeLeague, leagues } = this.props.appStore!;
+    if (!leagues || !activeLeague) {
+      return null;
+    }
+
+    return (
+      <select onChange={this.onLeagueSelect} defaultValue={activeLeague.id}>
+        {leagues!.map((l, k) => {
+          return (
+            <option key={k} value={l.id}>
+              {l.id}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+
+  render() {
+    return (
+      <div className="navbar">
+        {this.renderLeagueSelector()}
+        {this.renderStashTabSelector()}
+      </div>
+    );
+  }
+}