#app
View Compiled
@import "bourbon"

$mainColor : #9C27B0

body
  background-color:  #F2F2F2
  color: white
  font-family: $helvetica
  margin: 0
  box-sizing: border-box
  

//--------------------------
// Menu Bar
//--------------------------
.menubar
  display: block
  height: 60px
  background-color: $mainColor
  box-shadow: 2px 5px 5px 0 rgba(0,0,0,.12)
  text-align: center
  
.menubar span
  display: inline-block
  position: absolute
  left: 50%
  transform: translateX(-50%)
  font-weight: 300
  font-size: 2em
  line-height: 60px

//--------------------------
// Hamburger Menu
//--------------------------
#hambmenu
  position: relative
  width: 40px
  height: 45px
  float: left
  transition: .5s ease-in-out
  cursor: pointer
  & span
    position: absolute
    height: 5px
    width: 100%
    vertical-align: middle
    margin: 20px 0 0 15px
    background: white
    border-radius: 8px
    opacity: 1
    left: 0
    transform: rotate(0deg)
    transition: .25s ease-in-out
    padding: 0px
.hambclicker
  content: ''
  height: 48px
  width: 55px
  position: absolute
  top: 8px
  left: 8px
  cursor: pointer
  z-index: 9
#hambmenu  span:nth-child(1)
  top: 0px
#hambmenu  span:nth-child(2),#hambmenu  span:nth-child(3)
  top: 10px
#hambmenu  span:nth-child(4)
  top: 20px
#hambmenu.isopen span:nth-child(1)
  top: 18px
  width: 0%
  left: 50%
  opacity: 0
#hambmenu.isopen span:nth-child(2)
  transform: rotate(45deg)
#hambmenu.isopen span:nth-child(3)
  transform: rotate(-45deg)
#hambmenu.isopen span:nth-child(4)
  top: 18px
  width: 0%
  left: 50%
  opacity: 0

//--------------------------
// Slide In Menu
//--------------------------
#menu
  position: absolute
  height: calc(100vh - 60px)
  width: 210px
  background-color: white
  transform: translateX(-100%)
  transition: transform 300ms
  & ul
    margin-top: 0px
    padding: 0px
    color: black
    list-style-type: none
    text-align: left
  & li
    padding: 30px 0 20px 20px
    font-size: 1.5em
    border-bottom: 1px solid rgba(0,0,0,.14)
  & li:last-child
    border-bottom: none
.fa
  color: black
  padding-right: 8px
li a
  text-decoration: none
  color: black

#menu.isopen
  transform: none

@media screen and (max-width: 420px)
  .menubar span
    font-size: 1.2em
View Compiled
class MenuLinks extends React.Component {
  constructor(props) {
    super(props);
    // Any number of links can be added here
    this.state = {
      links: [{
        text: 'Author',
        link: 'https://github.com/Lakston',
        icon: 'fa-pencil-square-o'
      }, {
        text: 'Github page',
        link: 'https://github.com/Lakston',
        icon: 'fa-github'
      }, {
        text: 'Twitter',
        link: 'https://twitter.com/Fab_is_coding',
        icon: 'fa-twitter'
      }]
    }
  }
  render() {
    let links = this.state.links.map((link, i) => <li ref={i + 1}><i aria-hidden="true" className={`fa ${ link.icon }`}></i><a href={link.link} target="_blank">{link.text}</a></li>);

    return (
        <div className={this.props.menuStatus} id='menu'>
          <ul>
            { links }
          </ul>
        </div>
    )
  }
}

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    }
    this._menuToggle = this._menuToggle.bind(this);
    this._handleDocumentClick = this._handleDocumentClick.bind(this);
  }
  componentDidMount() {
    document.addEventListener('click', this._handleDocumentClick, false);
  }
  componentWillUnmount() {
    document.removeEventListener('click', this._handleDocumentClick, false);
  }
  _handleDocumentClick(e) {
    if (!this.refs.root.contains(e.target) && this.state.isOpen === true) {
      this.setState({
      isOpen: false
    });
    };
  }
  _menuToggle(e) {
    e.stopPropagation();
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    let menuStatus = this.state.isOpen ? 'isopen' : '';

    return (
      <div ref="root">
        <div className="menubar">
          <div className="hambclicker" onClick={ this._menuToggle }></div>
          <div id="hambmenu" className={ menuStatus }><span></span><span></span><span></span><span></span></div>
          <div className="title">
            <span>{ this.props.title }</span>
          </div>
        </div>
        <MenuLinks menuStatus={ menuStatus }/>
      </div>
    )
  }
}

ReactDOM.render(<Menu title='Awesome Title'/>, document.getElementById('app'))
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js