react-npm-menu/README.md

A side menu for the user to navigate around the site. Future versions of this menu will include access controls, that will show / hide items on the menu.

react-menu-component
========================

A React menu for the user to navigate around the site. Future versions of this menu will include access controls, that will show / hide items on the menu.



Overview
--------

A side menu for the user to navigate around the site. Future versions of this menu will include access controls, that will show / hide items on the menu.
```
<Menu params={data}/>;
```

### Params in more detail:

This is a full params object in all it's glory. See details about each key below.

```
{
  "currentRoute": "/",
  "menuItems": [
    {
      "name": "MY SITES",
      "route": "/mysites",
      "valign": "top"
    },
		{
      "name": "CONNECTION STATUS",
      "route": "/connection_status",
      "valign": "top"
    },
    {
      "name": "WETSTOCK LIVE ANALYTICS",
      "route": "/wetstock_live",
      "valign": "top",
      "children": [
        {
          "name": "Compliance",
          "route": "/compliance"
        },
        {
          "name": "Maintenance",
          "route": "/maintenance"
        },
				{
          "name": "Replenshments",
          "route": "/replenshments"
        },
				{
          "name": "Business",
          "route": "/business"
        }
      ]
    },
		  {
	      "name": "INCOMMING ALARMS",
	      "route": "/",
	      "valign": "top",
	      "children": [
	        {
	          "name": "12:06 LOW PRODUCT-TANK 1",
	          "route": "/product_tank1"
	        },
	        {
	          "name": "14:07 CLEARED -LOW-TANK 1",
	          "route": "/cleared_tank1"
	        }
	      ]
	    },
    {
      "name": "CONTACT US",
      "route": "/contact_us",
      "valign": "bottom"
    }
  ]
}
```

#### menuItems

All menu item for nevigate around the site.


#### menuChildren

 menu item for nevigate around the site.

### Features

- Display menu items in bootstrap style.
- Display menu data dynamacally just pass the JSON Object in menu component.
- Using Radium a React Component Styling Library for styling menu-component.
- Runs in the browser and Node.js.
- Built on standards.

### Example

```
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Menu from './components/menu';

class App extends Component {
	constructor(props){
		super(props);
	}

	render() {
		let data ={
  "currentRoute": "/",
  "menuItems": [
    {
      "name": "MY SITES",
      "route": "/mysites",
      "valign": "top"
    },
		{
      "name": "CONNECTION STATUS",
      "route": "/connection_status",
      "valign": "top"
    },
    {
      "name": "WETSTOCK LIVE ANALYTICS",
      "route": "/wetstock_live",
      "valign": "top",
      "children": [
        {
          "name": "Compliance",
          "route": "/compliance"
        },
        {
          "name": "Maintenance",
          "route": "/maintenance"
        },
				{
          "name": "Replenshments",
          "route": "/replenshments"
        },
				{
          "name": "Business",
          "route": "/business"
        }
      ]
    },
		  {
	      "name": "INCOMMING ALARMS",
	      "route": "/",
	      "valign": "top",
	      "children": [
	        {
	          "name": "12:06 LOW PRODUCT-TANK 1",
	          "route": "/product_tank1"
	        },
	        {
	          "name": "14:07 CLEARED -LOW-TANK 1",
	          "route": "/cleared_tank1"
	        }
	      ]
	    },
    {
      "name": "CONTACT US",
      "route": "/contact_us",
      "valign": "bottom"
    }
  ]
};
		return(
			<div>
      <Menu params={data}/>
			</div>
		);
	}
}

ReactDOM.render(<App />,document.querySelector('.container'));

```


### Technology Stack:

* react

### Usage:

Clone the repo as a new project:

```
git clone https://github.com/lobdev/react-npm-menu <react-menu-component>
```
Start Server:

```
First you have to replace the lib/component/menu.js to index.js in package.json
cd react-npm-menu
npm i
npm start
```
Run App:

```
npm start command automatically initiate browser at 3000 port
http:://localhost:3000
```

### Developer Notes:

Make sure you configure your editor/IDE to use:

```
.editorconfig
.eslintrc
```