import React from 'react';
import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav';
import SvgIcon from 'react-icons-kit';

import { ic_aspect_ratio } from 'react-icons-kit/md/ic_aspect_ratio';
import { ic_business } from 'react-icons-kit/md/ic_business';


//specify the base color/background of the parent container if needed
const MySideNav = () => (
    <div style={{background: '#2c3e50', color: '#FFF', width: 220}}> 
        <SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4' defaultSelected='sales'>       
            <Nav id='dashboard'>
                <NavIcon><SvgIcon size={20} icon={ic_aspect_ratio}/></NavIcon>    
                <NavText> Dashboard </NavText>
            </Nav>
            <Nav id='sales'>
                <NavIcon><SvgIcon size={20} icon={ic_business}/></NavIcon>
                <NavText> Sales </NavText>
            </Nav>
        </SideNav>
    </div>
)

//managed SideNav, state is handled within the component
<SideNav defaultSelected='xyz'>
  ...
</SideNav>

//stateless SideNav, state is handled within the component
<SideNav selected='xyz'>
  ...
</SideNav>

<SideNav selected='xyz' onItemSelection={ (id, parent) => {}}>
  <Nav />
  <Nav />
</SideNav>

import { withRR4 } from 'react-sidenav';
import { BrowserRouter as Router } from 'react-router';

const SideNav = withRR4();

export const Side = () => (
    <Router>
        <SideNav>
            //nav items and route will automatically updated upon selection
        </SideNav>
    </Router>
);