import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import {Drawer, MenuItem, AppBar} from 'material-ui';

const links = [
	{isExact: true, linkTo: '/', text: 'Home'},
	{isExact: true, linkTo: '/logos', text: 'Logos'},
	{isExact: true, linkTo: '/posters', text: 'Posters'},
	{isExact: true, linkTo: '/letterhead', text: 'Letterhead'},
	{isExact: true, linkTo: '/share-a-story', text: 'Share a Story'},
	{isExact: true, linkTo: '/service-request-form', text: 'Service Request Form'},
	{isExact: true, linkTo: '/tutorial', text: 'Tutorial'},
]

class SideNav extends Component {
	state = {
		open: false
	}

	handleToggle = () => this.setState({open: !this.state.open});
  handleClose = () => this.setState({open: false});

  SideBarItem = ({ link, text, isExact }) => {
    return (
      <NavLink activeClassName="active" exact={isExact} to={link} >
        <MenuItem onTouchTap={this.handleClose} primaryText={text} />
      </NavLink>
    );
  }

  render() {
  	const SideBarItem = this.SideBarItem;
  	return (
  		<div>
  			<AppBar
          title="Title"
          onLeftIconButtonTouchTap={this.handleToggle}
          />

        <Drawer docked={false} open={this.state.open} onRequestChange={(open) => this.setState({open})}>
        	{
        		links.map((link, i) => <SideBarItem link={link.linkTo} text={link.text} isExact={link.isExact} key={i} />)
        	}
        </Drawer>
  		</div>
  	)
  }
}

export default SideNav;
@@ -1,12 +1,28 @@
+// Dependencies%0A
 import React
@@ -63,95 +63,97 @@
 rt %7B
- NavLink %7D from 'react-router-dom';%0Aimport %7BDrawer, MenuItem, AppBar%7D from 'material-ui
+Drawer, AppBar%7D from 'material-ui';%0A%0A// Components%0Aimport SideBarItem from './SideBarItem
 ';%0A%0A
@@ -168,17 +168,18 @@
 nks = %5B%0A
-%09
+  
 %7BisExact
@@ -210,25 +210,26 @@
 t: 'Home'%7D,%0A
-%09
+  
 %7BisExact: tr
@@ -262,25 +262,26 @@
 : 'Logos'%7D,%0A
-%09
+  
 %7BisExact: tr
@@ -318,25 +318,26 @@
 'Posters'%7D,%0A
-%09
+  
 %7BisExact: tr
@@ -380,25 +380,26 @@
 tterhead'%7D,%0A
-%09
+  
 %7BisExact: tr
@@ -448,25 +448,26 @@
  a Story'%7D,%0A
-%09
+  
 %7BisExact: tr
@@ -534,17 +534,18 @@
 Form'%7D,%0A
-%09
+  
 %7BisExact
@@ -629,17 +629,18 @@
 onent %7B%0A
-%09
+  
 state = 
@@ -641,18 +641,20 @@
 ate = %7B%0A
-%09%09
+    
 open: fa
@@ -661,13 +661,15 @@
 lse%0A
-%09%7D%0A%0A%09
+  %7D%0A%0A  
 hand
@@ -785,314 +785,52 @@
 %0A%0A  
-SideBarItem = (%7B link, text, isExact %7D) =%3E %7B%0A    return (%0A      %3CNavLink activeClassName=%22active%22 exact=%7BisExact%7D to=%7Blink%7D %3E%0A        %3CMenuItem onTouchTap=%7Bthis.handleClose%7D primaryText=%7Btext%7D /%3E%0A      %3C/NavLink%3E%0A    );%0A  %7D%0A%0A  render() %7B%0A  %09const SideBarItem = this.SideBarItem;%0A  %09return (%0A  %09%09%3Cdiv%3E%0A  %09%09%09
+render() %7B%0A    return (%0A      %3Cdiv%3E%0A        
 %3CApp
@@ -1039,17 +1039,18 @@
         
-%09
+  
 %7B%0A      
@@ -1051,18 +1051,20 @@
         
-%09%09
+    
 links.ma
@@ -1095,16 +1095,18 @@
 tem link
+To
 =%7Blink.l
@@ -1112,17 +1112,55 @@
 linkTo%7D 
-t
+handleClose=%7Bthis.handleClose%7D primaryT
 ext=%7Blin
@@ -1210,17 +1210,18 @@
         
-%09
+  
 %7D%0A      
@@ -1238,10 +1238,12 @@
 %3E%0A  
-%09%09
+    
 %3C/di
@@ -1251,9 +1251,10 @@
 %3E%0A  
-%09
+  
 )%0A  

Add component SideBarItem