"use strict";

var React = require("react");
var LeftNav = require("material-ui/lib/left-nav");
var List = require('material-ui/lib/lists/list');
var ListItem = require('material-ui/lib/lists/list-item');
var PlayerStore = require("../stores/playerStore");

var CountryList = React.createClass({
    getInitialState: function () {
        return {
            countryList: []
        };
    },

    componentWillMount: function () {
        PlayerStore.addChangeListener(this._onChange)
    },

    componentWillUnmount: function () {
        PlayerStore.removeChangeListener(this._onChange)
    },

    _onChange: function () {
        var players = PlayerStore.getCountries();
        var self = this;

        players.forEach(function (element, index, array) {
            var imgStyle = {
                verticalAlign: "middle"
            };

            self.state.countryList.push(
                <ListItem key={index}>
                    <img src={element.thumbnailUrl} height="24" width="24" style={imgStyle}/>
                    &nbsp;{element.name}
                </ListItem>
            )
        });

        this.setState({countryList: this.state.countryList});
    },

    _toggleNav: function () {
        this.refs.leftNav.toggle();
    },

    render: function () {
        return (
            <div>
                <LeftNav ref="leftNav" docked={false}>
                    {this.state.countryList}
                </LeftNav>
            </div>
        )
    }
});

module.exports = CountryList;
@@ -1274,32 +1274,128 @@
 : function () %7B%0A
+        var listStyle = %7B%0A            maxHeight: 800,%0A            overflowY: %22auto%22%0A        %7D;%0A%0A
         return (
@@ -1492,32 +1492,109 @@
     
-%7Bthis.state.countryList%7D
+%3CList style=%7BlistStyle%7D%3E%0A                        %7Bthis.state.countryList%7D%0A                    %3C/List%3E
 %0A   

Add vertical scroll for the left navigation menu