React Responsive Menu Bar

How to install

npm install --save react-responsive-menubar

How to import into your component

import NavBar from 'react-responsive-menubar/lib/NavBar';

Usage Example

import React, { Component } from 'react';
import NavBar from 'react-responsive-menubar/lib/NavBar';

class App extends Component {

  state = {showSideNav:false}

  handleSideNavToggle = ()=>{
      this.setState((currentState)=>{
          return {showSideNav: !currentState.showSideNav}
      })
  }

 render(){
   //Position of navbar container (header in this case) should be set torelative.
  return(
      <header className="header" style={{position:"relative"}}>
          <NavBar 
          handleSideNavToggle={this.handleSideNavToggle} 
          logo={'https://picsum.photos/200/300?image=10'} 
          showSideNav={this.state.showSideNav} 
          logoStyles={{height:"65px", width:"85px"}} 
          navBarStyles={{boxShadow:"none"}} 
          linkStyles={{color:"green", fontWeight:"bold"}}>

              <a href="/">Link 1</a>
              <a href="/">Link 2</a>
              <a href="/">Link 3</a>
              <a href="/">Random Link</a>
              <a href="/">Link Finder</a>
              <a href="/">Home Page</a>
              <a href="/">Sample Link</a>
              <a href="/">Sign in or join</a>
              <a href="/">Help</a>

          </NavBar>
      </header>
  )
 }
}

API info (props passed)

| Prop | Value | Description | | ------------- |:-------------:| -----| | logo | URL | The image to be used as a logo | | logoStyles | {} | A plain Javascript object holding style values for the logo. Ex- {height:"50px"} | | navBarStyles | {} | A plain Javascript object holding style values for the navBar (container). Ex- {boxShadow:"none"} | | linkStyles | {} | A plain Javascript object holding style values for the navigation links. Ex- {color:"red"} | | showSideNav | true/false | A boolean variable, to specify the visibility of the side navigation bar on small screens. Initially set to false and can be toggled using a callback function. | | handleSideNavToggle | A function | A Javascript function that toggles the visibility of the side navigation on small screen devices. It is usually triggered on the click event of a hamburger menu icon displayed on small screen devices|