react-npm-menu/lib/components/renderMenu.js

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.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactBootstrap = require('react-bootstrap');

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _color = require('color');

var _color2 = _interopRequireDefault(_color);

var _reactInlineStyle = require('react-inline-style');

var _reactInlineStyle2 = _interopRequireDefault(_reactInlineStyle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  bgbutton: {
    "backgroundColor": "#999999",
    "width": "100%",
    "color": "white",
    "height": "48px",
    "textAlign": "left",
    ':hover': {
      background: 'white'
    }
  },
  bgSelectedButton: {

    "backgroundColor": "#808080",
    "width": "100%",
    "color": "white",
    "height": "48px",
    "textAlign": "left"
  },
  childrenContainer: {
    "backgroundColor": "#D3D3D3",
    "color": "white"
  },
  menuChildren: {
    "margin": 15,
    ':hover': {
      "textDecorationLine": null
    }

  }
};

var MenuItem = function MenuItem(props) {
  var i = 0;
  var menu_items = props.menuItems.map(function (items, index) {
    i++;
    return _react2.default.createElement(
      'div',
      { key: i },
      _react2.default.createElement(
        'div',
        null,
        function () {
          if (items.route == props.currentPath) {
            return _react2.default.createElement(
              _reactBootstrap.Button,
              { key: items.name, href: items.route, style: styles.bgSelectedButton, type: 'submit', bsStyle: 'default', className: 'ladda-button bg-button', 'data-style': 'expand-right', 'data-size': 'xs' },
              items.name
            );
          } else {
            return _react2.default.createElement(
              _reactBootstrap.Button,
              { key: items.name, href: items.route, style: styles.bgbutton, type: 'submit', bsStyle: 'default', className: 'ladda-button bg-button', 'data-style': 'expand-right', 'data-size': 'xs' },
              items.name
            );
          }
        }()
      ),
      function () {
        i++;
        if (items.children != undefined) {
          var childrenItems = items.children.map(function (childrenItem, index) {
            return _react2.default.createElement(
              'a',
              { key: childrenItem.name, style: styles.menuChildren, href: childrenItem.route },
              childrenItem.name,
              _react2.default.createElement('br', null)
            );
          });
          return _react2.default.createElement(
            'div',
            { style: styles.childrenContainer },
            childrenItems,
            _react2.default.createElement('br', null)
          );
        }
      }()
    );
  });
  return _react2.default.createElement(
    'div',
    null,
    menu_items
  );
};

exports.default = MenuItem;