react-simple-sidenav

Demo [react-simple-sidenav]

Demo 1 [with default styles]

  import react from 'react';
  import SideNav, {MenuIcon} from 'react-simple-sidenav';

  React.createClass({
    render() {
      return(
        <MenuIcon onClick={() => this.setState({showNav: true})}/>

        <SideNav
          showNav = {showNav}
          onHideNav = {() => this.setState({showNav: false})} />
      )
    }
  })

Demo 2 [with custom styles]

  <SideNav
    showNav        =  {showNav}
    onHideNav      =  {() => this.setState({showNav: false})}
    title          =  "Hello World"
    items          =  {['home', 'services', 'about', 'contact']}
    titleStyle     =  {{backgroundColor: '#4CAF50'}}
    itemStyle      =  {{backgroundColor: '#fff'}}
    itemHoverStyle =  {{backgroundColor: '#CDDC39'}}
    />

Demo 3 [with custom items]

  <SideNav
    showNav={showNav3}
    onHideNav={()=>this.setState({showNav3:false})}
    title={<div>Hello octo <img src='git-mark.png' width='26' /></div>}
    titleStyle={{backgroundColor: '#2196F3'}}
    items={[
      <a target='_blank' href='https://github.com/gauravchl/react-simple-sidenav'>View Source on github</a>,
      <a target='_blank' href='https://www.npmjs.com/package/react-simple-sidenav'>Install via npm</a>,
      <a target='_blank' href='https://gauravchl.github.io/react-simple-sidenav/example'>demo</a>
      ]} />

Demo 4 [open from right]

  <SideNav
    openFromRight={true}
    showNav={showNav4}
    onHideNav={()=>this.setState({showNav4: false})}
    title='Open From right'
    titleStyle={{backgroundColor: '#FF5722'}}
    items={['Item1', 'Item2', 'Item3']} />