A React side-menu component.

Usage

Here is a quick example to get you started, it's all you need:

This component uses icons from Font Awesome, but it does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.

import React, {Component} from 'react';

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

import Links from 'path/to/links';
import SideMenu from 'SideMenu';

class App extends Component {

  handleLinkSelect = link =>
    console.log(link); //{id, name, url}

  render() {
    return (
      <Router> //added somewhere on your project
        <div>
          <SideMenu
            links={Links}
            onSelectLink={this.handleLinkSelect}
          />
        </div>
      </Router>
    );
  }
}

export default App;

Props

links: PropTypes.arrayOf(PropTypes.shape({
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired, //font awesome icon name
  badge: PropTypes.number
})).isRequired,
position: PropTypes.string, //left or right
onSelectLink: PropTypes.func.isRequired

Links array example

export default [{
  id: 1,
  name: 'rocket',
  url: '/app/rocket',
  icon: 'rocket'
}, {
  id: 2,
  name: 'bomb',
  url: '/app/bomb',
  icon: 'bomb',
  badge: 2
}, {
  id: 3,
  name: 'coffee',
  url: '/app/coffee',
  icon: 'coffee'
}];