import React, { Component } from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import Divider from 'material-ui/Divider';
import FlatButton from 'material-ui/FlatButton';

import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
import AddShoppingCart from 'material-ui/svg-icons/action/add-shopping-cart';
import ThumbsUpDown from 'material-ui/svg-icons/action/thumbs-up-down';
import Album from 'material-ui/svg-icons/av/album';
import Directions from 'material-ui/svg-icons/maps/directions';
import PersonOutline from 'material-ui/svg-icons/social/person-outline';
import ChatBubble from 'material-ui/svg-icons/communication/chat-bubble';


class Navbar extends React.Component {

  render() {
    console.log("Navbar props", this.props);
    return (
      <Drawer
        docked={this.props.docked}
        width={220}
        open={this.props.open}
        openRight={false}
        onRequestChange={this.props.onRequestChange}
        >
        <MenuItem onTouchTap={() => this.props.onPageChange('index')}
                  leftIcon={<img src="/static/musicians_black.png"
                                 alt="Logo of the Festival" />}
                  style={{color: "#999"}} >Marsinne Festival</MenuItem>
        <div>
          <FlatButton label="Fr" primary={this.props.lang == 'fr'} style={{minWidth: '30px'}}
                      onClick={() => this.props.onLanguageChange('fr')} />
          <FlatButton label="Nl" primary={this.props.lang == 'nl'} style={{minWidth: '30px'}}
                      onClick={() => this.props.onLanguageChange('nl')} />
          <FlatButton label="En" primary={this.props.lang == 'en'} style={{minWidth: '30px'}}
                      onClick={() => this.props.onLanguageChange('en')} />
        </div>
        <Divider />

        <MenuItem onTouchTap={() => this.props.onPageChange('program')} leftIcon={<RemoveRedEye />}>Programmation</MenuItem>
        <MenuItem onTouchTap={() => this.props.onPageChange('activities')} leftIcon={<ThumbsUpDown />}>Animations</MenuItem>
        <MenuItem onTouchTap={() => this.props.onPageChange('tickets')} leftIcon={<AddShoppingCart />}>Tickets</MenuItem>
        <MenuItem onTouchTap={() => this.props.onPageChange('access')} leftIcon={<Directions />}>Accès</MenuItem>
        <MenuItem onTouchTap={() => this.props.onPageChange('volunteer')} leftIcon={<PersonOutline />}>Bénévoles</MenuItem>
        <MenuItem onTouchTap={() => this.props.onPageChange('contact')} leftIcon={<ChatBubble />}>Contact</MenuItem>
      </Drawer>
    );
  }

  handleMenuItem(pageName) {
    this.props.onPageChange(pageName);
    this.props.onRequestChange();
  }

  handleGotoAccess() {
    alert("plop");
  }
}


export default Navbar;

@@ -214,16 +214,81 @@
 tton';%0A%0A
+import AvQueueMusic from 'material-ui/svg-icons/av/queue-music';%0A
 import R
@@ -1978,28 +1978,28 @@
 tIcon=%7B%3C
-RemoveRedEye
+AvQueueMusic
  /%3E%7D%3EPro
@@ -2090,24 +2090,147 @@
 ctivities')%7D
+ leftIcon=%7B%3CRemoveRedEye /%3E%7D%3EAnimations%3C/MenuItem%3E%0A        %3CMenuItem onTouchTap=%7B() =%3E this.props.onPageChange('artisans')%7D
  leftIcon=%7B%3C
@@ -2243,31 +2243,29 @@
 UpDown /%3E%7D%3EA
-nimatio
+rtisa
 ns%3C/MenuItem

Add drawer section 'Artisans'