title: Material-ui transition between old LeftNav menu style and the composability one with Reactjs
body: <p>Ok, so I am very confused about the way of making a LeftNav menu with material-ui.</p>
  
  <p>I am new on the project and I updated reactjs and material-ui.</p>
  
  <p>So, a lot of stuff have been deprecated about LeftNav from material-ui and I am trying to fix it.</p>
  
  <p>Here is the menu as it was when I opened the project (with all the console warning):</p>
  
  <pre><code>        &lt;LeftNav ref="leftNav"
               docked={false}
               style={{opacity: '0.9'}}
               menuItems={menuItems}
               onChange={this.leftNavOnChange} /&gt;
  </code></pre>
  
  <p>From this array:</p>
  
  <pre><code>var menuItems = [
    { route: '/', text: 'Home' },
    { type: 'SUBHEADER', text: 'Connect' },
    { route: '/categories', text: 'Categories' },
    { route: '/icons', text: 'Icons'},
    { route: '/Tmp', text: 'Tmp', disabled: !Permissions['connect_v2_list_tmp']['isPermitted'] },
    { route: '/wizard', text: 'Wizard', disabled: !Permissions['connect_v2_analyze_spreadsheet']['isPermitted'] },
    { route: '/linkshortener', text: 'Link shortener'},
    { type: 'SUBHEADER', text: 'Visual search' },
    { route: '/whitelist', text: 'Whitelist', disabled: !Permissions['connect_v2_list_whitelist']['isPermitted'] },
    { route: '/blacklist', text: 'Blacklist', disabled: !Permissions['connect_v2_list_blacklist']['isPermitted'] },
    { type: 'SUBHEADER', text: 'Tmp-wise' },
    { route: '/viewer', text: 'Viewer', disabled: !Permissions['connect_v2_view_bw_entity']['isPermitted']},
  ];
  </code></pre>
  
  <p>And here is what I did from what I understood about the way of doing it:</p>
  
  <pre><code>        &lt;LeftNav ref="leftNav"
               docked={false}
               style={{opacity: '0.9'}}
               //menuItems={menuItems}
               //onChange={this.leftNavOnChange}
               &gt;
                {menuItems.map(function(items, i) {
                      if (items.route) {
                        return &lt;MenuItem linkButton={true} href={items.route} key={i}&gt;{items.text}&lt;/MenuItem&gt;;
                      } else {
                        return &lt;MenuItem data={items.type} key={i}&gt;{items.text}&lt;/MenuItem&gt;;
                      }
                })}
          &lt;/LeftNav&gt;
  </code></pre>
  
  <p>So, less warning except one : <em>using methods on left nav has been deprecated. Please refer to documentations.</em>
  but not such a big deal.</p>
  
  <p>My problem here, is that my links are not working. I am staying on the same page.
  And my other main problem: all the style it had is gone. </p>
  
  <p>So, <strong>my question is:</strong>
  am I doing it right?</p>
  
  <p>Or am I missing something owned by reactjs and / or material-ui?</p>
  
  <p>Thanks a lot in advance for the time spent on my request.</p>