module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		var threw = true;
/******/ 		try {
/******/ 			modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ 			threw = false;
/******/ 		} finally {
/******/ 			if(threw) delete installedModules[moduleId];
/******/ 		}
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ({

/***/ "./module/index.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* unused harmony export emitter */
/* unused harmony export toggleLeft */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return showLeft; });
/* unused harmony export hideLeft */
/* unused harmony export toggleRight */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return showRight; });
/* unused harmony export hideRight */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__("react");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_tiny_emitter__ = __webpack_require__("tiny-emitter");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_tiny_emitter___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_tiny_emitter__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__styles__ = __webpack_require__("./module/styles.js");
var _jsxFileName = '/Users/hakonmartinholmsenkrogh/www/react-layout/module/index.js';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }






var defaultWidth = '300px';

var emitter = new __WEBPACK_IMPORTED_MODULE_1_tiny_emitter___default.a();
var showStatus = {
  left: false,
  right: false
};

var toggleLeft = function toggleLeft() {
  var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !showStatus.left;

  showStatus.left = show;
  emitter.emit('toggle', showStatus);
};
var showLeft = function showLeft() {
  return toggleLeft(true);
};
var hideLeft = function hideLeft() {
  return toggleLeft(false);
};

var toggleRight = function toggleRight() {
  var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !showStatus.right;

  showStatus.right = show;
  emitter.emit('toggle', showStatus);
};
var showRight = function showRight() {
  return toggleRight(true);
};
var hideRight = function hideRight() {
  return toggleRight(false);
};

var CrystallizeLayout = function (_Component) {
  _inherits(CrystallizeLayout, _Component);

  function CrystallizeLayout() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, CrystallizeLayout);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CrystallizeLayout.__proto__ || Object.getPrototypeOf(CrystallizeLayout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      showLeft: showStatus.left,
      showRight: showStatus.right
    }, _this.onToggle = function (_ref2) {
      var left = _ref2.left,
          right = _ref2.right;

      _this.setState({
        showLeft: left,
        showRight: right
      });

      if (left || right) {
        _this.disableScroll(true);
      } else {
        _this.disableScroll(false);
      }
    }, _this.onOverlayClick = function (e) {
      e.preventDefault();
      toggleLeft(false);
      toggleRight(false);
    }, _this.renderChildren = function (additionalProps) {
      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.Children.map(_this.props.children, function (child) {
        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.cloneElement(child, additionalProps);
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(CrystallizeLayout, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      emitter.on('toggle', this.onToggle);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      emitter.off('toggle', this.onToggle);
    }
  }, {
    key: 'disableScroll',
    value: function disableScroll(stop) {
      if (!this.defaultBodyOverflow) {
        var style = getComputedStyle(document.body);
        this.defaultBodyOverflow = style.overflowY;
      }
      document.body.style.overflowY = stop ? 'hidden' : this.defaultBodyOverflow;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          left = _props.left,
          right = _props.right,
          _props$width = _props.width,
          width = _props$width === undefined ? defaultWidth : _props$width,
          leftWidth = _props.leftWidth,
          rightWidth = _props.rightWidth;


      var leftWidthToUse = leftWidth || width;
      var rightWidthToUse = rightWidth || width;

      var _state = this.state,
          showLeft = _state.showLeft,
          showRight = _state.showRight;


      var contentPushed = '0px';
      if (showLeft) {
        contentPushed = leftWidthToUse;
      } else if (showRight) {
        contentPushed = '-' + rightWidthToUse;
      }

      var LeftCmp = left || null;
      var RightCmp = right || null;

      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
        __WEBPACK_IMPORTED_MODULE_2__styles__["d" /* Outer */],
        {
          showLeft: showLeft,
          showRight: showRight,
          leftWidth: leftWidthToUse,
          rightWidth: rightWidthToUse,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 100
          }
        },
        (showLeft || showRight) && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__styles__["a" /* ClickOverlay */], { onClick: this.onOverlayClick, __source: {
            fileName: _jsxFileName,
            lineNumber: 107
          }
        }),
        __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
          __WEBPACK_IMPORTED_MODULE_2__styles__["b" /* Content */],
          {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 109
            }
          },
          this.renderChildren({
            leftShown: showLeft,
            rightShown: showRight,
            contentPushed: contentPushed
          })
        ),
        LeftCmp && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
          __WEBPACK_IMPORTED_MODULE_2__styles__["c" /* Left */],
          { width: leftWidthToUse, show: showLeft, __source: {
              fileName: _jsxFileName,
              lineNumber: 117
            }
          },
          __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeftCmp, { shown: showLeft, __source: {
              fileName: _jsxFileName,
              lineNumber: 118
            }
          })
        ),
        RightCmp && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
          __WEBPACK_IMPORTED_MODULE_2__styles__["e" /* Right */],
          { width: rightWidthToUse, show: showRight, __source: {
              fileName: _jsxFileName,
              lineNumber: 122
            }
          },
          __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(RightCmp, { shown: showRight, __source: {
              fileName: _jsxFileName,
              lineNumber: 123
            }
          })
        )
      );
    }
  }]);

  return CrystallizeLayout;
}(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]);

/* harmony default export */ __webpack_exports__["a"] = (CrystallizeLayout);

/***/ }),

/***/ "./module/styles.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return Outer; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return Content; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return Left; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return Right; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ClickOverlay; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_styled_components__ = __webpack_require__("styled-components");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_styled_components___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_styled_components__);
var _templateObject = _taggedTemplateLiteral(['\n  transition: left 0.3s cubic-bezier(0.41, 0.03, 0, 0.96);\n  position: relative;\n  left: ', ';\n  will-change: left;\n'], ['\n  transition: left 0.3s cubic-bezier(0.41, 0.03, 0, 0.96);\n  position: relative;\n  left: ', ';\n  will-change: left;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  z-index: 2;\n  overflow-x: ', ';\n  background: ', ';\n'], ['\n  position: relative;\n  z-index: 2;\n  overflow-x: ', ';\n  background: ', ';\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  position: fixed;\n  top: 0;\n  left: ', ';\n  z-index: 1;\n  height: 100%;\n  height: 100vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transition: left 0.3s cubic-bezier(0.41, 0.03, 0, 0.96);\n  width: ', ';\n  will-change: left;\n'], ['\n  position: fixed;\n  top: 0;\n  left: ', ';\n  z-index: 1;\n  height: 100%;\n  height: 100vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transition: left 0.3s cubic-bezier(0.41, 0.03, 0, 0.96);\n  width: ', ';\n  will-change: left;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  position: fixed;\n  top: 0;\n  right: ', ';\n  z-index: 1;\n  height: 100%;\n  height: 100vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transition: right 0.3s cubic-bezier(0.41, 0.03, 0, 0.96);\n  width: ', ';\n  will-change: right;\n'], ['\n  position: fixed;\n  top: 0;\n  right: ', ';\n  z-index: 1;\n  height: 100%;\n  height: 100vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transition: right 0.3s cubic-bezier(0.41, 0.03, 0, 0.96);\n  width: ', ';\n  will-change: right;\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: 100vw;\n  z-index: 3;\n'], ['\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: 100vw;\n  z-index: 3;\n']);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }



function getPosition(props) {
  if (props.show) {
    return '0px';
  }
  return '-' + props.width;
}

function getOuterLeft(props) {
  if (props.showLeft) {
    return props.leftWidth;
  }
  if (props.showRight) {
    return '-' + props.rightWidth;
  }
  return '0';
}

function getContentOverflowX(props) {
  if (props.showLeft || props.showRight) {
    return 'hidden';
  }
  return 'visible';
}

var Outer = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout'
})(_templateObject, getOuterLeft);

var Content = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__content'
})(_templateObject2, getContentOverflowX, function (p) {
  return p.background;
});

var Left = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__menu crystallize-layout__menu--left'
})(_templateObject3, getPosition, function (p) {
  return p.width || '300px';
});

var Right = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__menu crystallize-layout__menu--right'
})(_templateObject4, getPosition, function (p) {
  return p.width || '300px';
});

var ClickOverlay = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__click-overlay'
})(_templateObject5);

/***/ }),

/***/ "./pages/index.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_styled_jsx_style__ = __webpack_require__("styled-jsx/style");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_styled_jsx_style___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_styled_jsx_style__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__("react");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__module__ = __webpack_require__("./module/index.js");
var _jsxFileName = '/Users/hakonmartinholmsenkrogh/www/react-layout/pages/index.js';




var left = function left() {
  return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
    'div',
    {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 3
      }
    },
    'Left menu'
  );
};
var right = function right() {
  return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
    'div',
    {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 4
      }
    },
    'Right menu'
  );
};

/* harmony default export */ __webpack_exports__["default"] = (function () {
  return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
    __WEBPACK_IMPORTED_MODULE_2__module__["a" /* default */],
    { left: left, right: right, __source: {
        fileName: _jsxFileName,
        lineNumber: 7
      }
    },
    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_0_styled_jsx_style___default.a, {
      styleId: '3760813996',
      css: 'div.jsx-3760813996{text-align:center;min-height:150vh;}h1.jsx-3760813996{margin:0 0 15px;padding-top:10px;}button.jsx-3760813996{margin:0 10px;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL2luZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9nQixBQUcyQixBQUtGLEFBS0YsY0FDaEIsRUFMbUIsRUFMQSxlQU1uQixFQUxBIiwiZmlsZSI6InBhZ2VzL2luZGV4LmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9oYWtvbm1hcnRpbmhvbG1zZW5rcm9naC93d3cvcmVhY3QtbGF5b3V0Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IENyeXN0YWxsaXplTGF5b3V0LCB7IHNob3dSaWdodCwgc2hvd0xlZnQgfSBmcm9tICcuLi9tb2R1bGUnO1xuXG5jb25zdCBsZWZ0ID0gKCkgPT4gPGRpdj5MZWZ0IG1lbnU8L2Rpdj47XG5jb25zdCByaWdodCA9ICgpID0+IDxkaXY+UmlnaHQgbWVudTwvZGl2PjtcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8Q3J5c3RhbGxpemVMYXlvdXQgbGVmdD17bGVmdH0gcmlnaHQ9e3JpZ2h0fT5cbiAgICA8c3R5bGUganN4PntgXG4gICAgICBkaXYge1xuICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgICAgIG1pbi1oZWlnaHQ6IDE1MHZoO1xuICAgICAgfVxuXG4gICAgICBoMSB7XG4gICAgICAgIG1hcmdpbjogMCAwIDE1cHg7XG4gICAgICAgIHBhZGRpbmctdG9wOiAxMHB4O1xuICAgICAgfVxuXG4gICAgICBidXR0b24ge1xuICAgICAgICBtYXJnaW46IDAgMTBweDtcbiAgICAgIH1cbiAgICBgfTwvc3R5bGU+XG4gICAgPGRpdj5cbiAgICAgIDxoMT5SZWFjdCBsYXlvdXQ8L2gxPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtzaG93TGVmdH0+U2hvdyBsZWZ0PC9idXR0b24+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e3Nob3dSaWdodH0+U2hvdyByaWdodDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L0NyeXN0YWxsaXplTGF5b3V0PlxuKTtcbiJdfQ== */\n/*@ sourceURL=pages/index.js */'
    }),
    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
      'div',
      {
        className: 'jsx-3760813996',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 23
        }
      },
      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
        'h1',
        {
          className: 'jsx-3760813996',
          __source: {
            fileName: _jsxFileName,
            lineNumber: 24
          }
        },
        'React layout'
      ),
      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
        'button',
        { onClick: __WEBPACK_IMPORTED_MODULE_2__module__["b" /* showLeft */], className: 'jsx-3760813996',
          __source: {
            fileName: _jsxFileName,
            lineNumber: 25
          }
        },
        'Show left'
      ),
      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
        'button',
        { onClick: __WEBPACK_IMPORTED_MODULE_2__module__["c" /* showRight */], className: 'jsx-3760813996',
          __source: {
            fileName: _jsxFileName,
            lineNumber: 26
          }
        },
        'Show right'
      )
    )
  );
});

/***/ }),

/***/ 2:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__("./pages/index.js");


/***/ }),

/***/ "react":
/***/ (function(module, exports) {

module.exports = require("react");

/***/ }),

/***/ "styled-components":
/***/ (function(module, exports) {

module.exports = require("styled-components");

/***/ }),

/***/ "styled-jsx/style":
/***/ (function(module, exports) {

module.exports = require("styled-jsx/style");

/***/ }),

/***/ "tiny-emitter":
/***/ (function(module, exports) {

module.exports = require("tiny-emitter");

/***/ })

/******/ });
//# sourceMappingURL=index.js.map