coming along well - electron is pretty nice

app/components/SubHeader/SubHeader.scss

@@ -0,0 +1,22 @@
+@import '../../scss/variables.scss';
+
+.sub-header {
+  background: $dark-blue--1;
+  border-bottom: 1px solid $dark-blue--3;
+  display: flex;
+  height: 100px;
+  overflow: auto;
+
+  .sub-header__item {
+    width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover, &.selected {
+      background: $dark-blue--3;
+    }
+
+  }
+}

app/components/SubHeader/SubHeader.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import * as _ from 'lodash';
+import { AppState } from '../../state/AppState';
+
+import './SubHeader.scss';
+
+interface Props {
+  AppState?: AppState;
+}
+
+@inject('AppState')
+@observer
+export class SubHeader extends React.Component<Props, any> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public componentDidMount(): void {
+    this.renderItems();
+  }
+
+  private selectExpansion(exp: string): void {
+    this.props.AppState.setSelectedExpansion(exp);
+  }
+
+  private renderItems(): any {
+    const { selectedExpKey } = this.props.AppState;
+    return _.map(this.props.AppState.expansions, (exp, key) => {
+      return (
+        <div key={key} className={'sub-header__item ' + (key === selectedExpKey && 'selected')} onClick={() => this.selectExpansion(key)}>
+          <div style={{ textAlign: 'center' }}>{exp.name}</div>
+        </div>
+      );
+    });
+  }
+
+  public render(): any {
+    return (
+      <div className="sub-header">
+        {this.renderItems()}
+      </div>
+    );
+  }
+}