React Atmosphere Menu

Demo

http://lightninglu10.reactatmosphere.hellodeploy.com/

Install the package

Use NPM or Yarn

yarn add react-atmosphere-menu

npm install --save react-atmosphere-menu

Usage

1 . Require react-atmosphere-menu after installation

import AtmosphereMenu from 'react-atmosphere-menu'

2 . Wrap react-atmosphere-menu around your app

<AtmosphereMenu>
  <YOUR APP />
</AtmosphereMenu

3 . Customize options

var nav = [
  {id: 'home', label: 'Home', path: '/'},
  {id: 'about', label: 'About', path: '/about'},
  {id: 'discover', label: 'Discover', path: '/discover'},
]
<AtmosphereMenu
  active={this.state.atmosphereActive}
  nav={nav}
  reactRouter={true}
  tagLine={"Made by"}
  companyName={"Q5"}
  closeMenu={() => this.setState({atmosphereActive: false})}>
  <YOUR APP />
</AtmosphereMenu

Main Options

Option|Type | Description |:---|:---|:--- active | Boolean | true will show the menu and false will hide the menu. (Required) nav | Array | An array of objects that describe the navigation menu. Each object needs to have keys id, label, and path. (Required) reactRouter | Boolean | true if you use React Router in your project false if you don't. tagLine | String | Below the navigation, there will be an area for extra text. The tagline goes above the company text. companyName | String | Below the navigation, there will be an area for extra text. Here you can display your name or company or group. logoComponent | Component | Displayed in line with the companyName, add a component for a logo like so: <img src={LOGO} />. closeMenu | Function | The function that closes your atmosphere menu. Should set the variable for the active prop to false. backgroundImage | Image / String | An image you want to display in the background on the active Menu or a color. It can be a link to an image online, a file, or #eee.

Extra Options / Styling options

Option|Type | Description |:---|:---|:--- menuClassName | String | Extra class to style the AtmosphereMenu component. Default: menu: { position: 'relative', overflow: 'hidden', }, appClassName | String | Extra class to style your app when the menu is active. companyClassName | String | Extra class to style the companyName text. navItemClassName | String | Extra class to style each Navigation item. Default: navItem: { marginBottom: '25px', opacity: '.7', ':hover': { opacity: '1',}}, navLinkStyle | String | Extra prop to style the <a> or Link element of each Navigation Item. Default: linkStyle: { textDecoration: 'none', color: '#fff', fontWeight: '300', '@media only screen and (min-width: 768px)': { fontSize: '2em', }, '@media only screen and (min-width: 1440px)': { fontSize: '2.5em', }}, linkClassName | String | Extra class to style the <a> or Link element of each Navigation item. Has the same style default as above navLinkStyle. navClassName | String | Extra class to style the whole Nav component.

Inspired by

www.atmospherejs.com