lots of progress - basic functionality work - bundling working

app/components/SubHeader/SubHeader.scss

@@ -5,10 +5,11 @@
   border-bottom: 1px solid $dark-blue--3;
   display: flex;
   height: 100px;
-  overflow: auto;
+  overflow-x: auto;
 
   .sub-header__item {
-    width: 100px;
+    min-width: 180px;
+    width: 180px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -17,6 +18,10 @@
     &:hover, &.selected {
       background: $dark-blue--3;
     }
+  }
 
+  .exp-image {
+    width: 90%;
+    height: auto;
   }
 }

app/components/SubHeader/SubHeader.tsx

@@ -3,6 +3,16 @@ import { inject, observer } from 'mobx-react';
 import * as _ from 'lodash';
 import { AppState } from '../../state/AppState';
 
+import vanilla from '../../assets/vanilla.png';
+import bc from '../../assets/bc.png';
+import wotlk from '../../assets/wotlk.png';
+
+const images: any = {
+  vanilla,
+  bc,
+  wotlk,
+};
+
 import './SubHeader.scss';
 
 interface Props {
@@ -26,10 +36,10 @@ export class SubHeader extends React.Component<Props, any> {
 
   private renderItems(): any {
     const { selectedExpKey } = this.props.AppState;
-    return _.map(this.props.AppState.expansions, (exp, key) => {
+    return _.map(this.props.AppState.expansions, (_, key) => {
       return (
         <div key={key} className={'sub-header__item ' + (key === selectedExpKey && 'selected')} onClick={() => this.selectExpansion(key)}>
-          <div style={{ textAlign: 'center' }}>{exp.name}</div>
+          <img src={images[key]} className="exp-image"/>
         </div>
       );
     });