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 defaultWidth */
/* unused harmony export defaultTransitionEasing */
/* unused harmony export minimalWidthForPushedOutContent */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LayoutContext; });
/* 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_is_callable__ = __webpack_require__("is-callable");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_is_callable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_is_callable__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__styles__ = __webpack_require__("./module/styles.js");
var _jsxFileName = '/Users/hakonmartinholmsenkrogh/Documents/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 defaultTransitionEasing = 'cubic-bezier(0.41, 0.03, 0, 0.96)';

var speed = 250;

// The minimal width in px for the pushed out content
var minimalWidthForPushedOutContent = 65;

var LayoutContext = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext();

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: false,
      showRight: false,
      widthOverride: null
    }, _this.activeWidthOverrides = {
      left: false,
      right: false,
      get any() {
        return this.left || this.right;
      }
    }, _this.animating = false, _this.startWidthOverride = function (side) {
      _this.activeWidthOverrides[side] = true;
    }, _this.handleWindowResize = function () {
      clearTimeout(_this.widthOverrideSetTimeout);
      _this.widthOverrideSetTimeout = setTimeout(function () {
        _this.setState({
          widthOverride: window.innerWidth - minimalWidthForPushedOutContent + 'px'
        });
      }, 25);

      // Set the current visible viewport to a custom variable
      var vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', vh + 'px');
    }, _this.stopWidthOverride = function (side) {
      _this.activeWidthOverrides[side] = false;

      if (!_this.activeWidthOverrides.any) {
        clearTimeout(_this.widthOverrideSetTimeout);
      }
    }, _this.listenForMediaChange = function () {
      var _this$props = _this.props,
          _this$props$width = _this$props.width,
          width = _this$props$width === undefined ? defaultWidth : _this$props$width,
          leftWidth = _this$props.leftWidth,
          rightWidth = _this$props.rightWidth;


      var left = leftWidth || width;
      var right = rightWidth || width;

      _this.leftMql = window.matchMedia('(min-width: ' + (parseInt(left, 10) + minimalWidthForPushedOutContent) + 'px)');
      _this.leftMql.addListener(_this.handleLeftMediaChange);
      _this.handleLeftMediaChange(_this.leftMql);

      _this.rightMql = window.matchMedia('(min-width: ' + (parseInt(right, 10) + minimalWidthForPushedOutContent) + 'px)');
      _this.rightMql.addListener(_this.handleRightMediaChange);
      _this.handleRightMediaChange(_this.rightMql);
    }, _this.handleLeftMediaChange = function (mql) {
      var theScreenIsTooSmallForMenu = !mql.matches;
      if (theScreenIsTooSmallForMenu) {
        _this.startWidthOverride('left');
      } else {
        _this.stopWidthOverride('left');
      }
    }, _this.handleRightMediaChange = function (mql) {
      var theScreenIsTooSmallForMenu = !mql.matches;
      if (theScreenIsTooSmallForMenu) {
        _this.startWidthOverride('right');
      } else {
        _this.stopWidthOverride('right');
      }
    }, _this.stopListenForMediaChange = function () {
      _this.leftMql.removeListener(_this.handleLeftMediaChange);
      _this.rightMql.removeListener(_this.handleRightMediaChange);
      _this.stopWidthOverride('left');
      _this.stopWidthOverride('right');
    }, _this.onToggle = function (_ref2) {
      var left = _ref2.left,
          right = _ref2.right;

      if (_this.animating) {
        return Promise.resolve();
      }

      return new Promise(function (resolve) {
        _this.animating = true;

        var showASide = left || right;

        // Blur any active element
        if (document.activeElement) {
          document.activeElement.blur();
        }

        // Ensure we disable scroll before the animation kicks in
        if (showASide) {
          _this.disableScroll(true);
        }

        _this.setState({
          showLeft: left,
          showRight: right
        }, function () {
          setTimeout(function () {
            _this.animating = false;

            // Enable the scroll after the animation is done
            if (!showASide) {
              _this.disableScroll(false);
            }

            resolve();
          }, speed);
        });
      });
    }, _this.onOverlayClick = function (e) {
      e.preventDefault();
      _this.contextActions.hideBoth();
    }, _this.contextActions = {
      showLeft: function showLeft() {
        return _this.onToggle({ left: true, right: false });
      },
      hideLeft: function hideLeft() {
        return _this.onToggle({ left: false });
      },
      toggleLeft: function toggleLeft() {
        return _this.onToggle({ left: !_this.state.leftShown, right: false });
      },
      showRight: function showRight() {
        return _this.onToggle({ right: true, left: false });
      },
      hideRight: function hideRight() {
        return _this.onToggle({ right: false });
      },
      toggleRight: function toggleRight() {
        return _this.onToggle({ right: !_this.state.rightShown, left: false });
      },
      hideBoth: function hideBoth() {
        return _this.onToggle({ left: false, right: false });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(CrystallizeLayout, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      speed = parseInt(this.props.speed || 300);

      this.listenForMediaChange();
      this.handleWindowResize();
      window.addEventListener('resize', this.handleWindowResize, false);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.stopListenForMediaChange();

      window.removeEventListener('resize', this.handleWindowResize);
    }
  }, {
    key: 'disableScroll',
    value: function disableScroll(stop) {
      if (!this.defaultBodyOverflow) {
        var style = getComputedStyle(document.body);
        this.defaultBodyOverflow = style.overflow;
      }
      document.body.style.overflow = 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,
          _props$transitionEasi = _props.transitionEasing,
          transitionEasing = _props$transitionEasi === undefined ? defaultTransitionEasing : _props$transitionEasi,
          leftWidth = _props.leftWidth,
          rightWidth = _props.rightWidth,
          blurContentOnShow = _props.blurContentOnShow,
          _props$transitionProp = _props.transitionProp,
          transitionProp = _props$transitionProp === undefined ? 'left' : _props$transitionProp,
          children = _props.children;
      var widthOverride = this.state.widthOverride;


      var leftWidthToUse = this.activeWidthOverrides.left ? widthOverride : leftWidth || width;
      var rightWidthToUse = this.activeWidthOverrides.right ? widthOverride : 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;

      // Enable the blur content on show prop setting
      var blurContentOnShowProp = blurContentOnShow;
      if (blurContentOnShow && typeof blurContentOnShow === 'boolean') {
        blurContentOnShowProp = '3px';
      }

      var exposedState = {
        leftShown: showLeft,
        rightShown: showRight,
        contentPushed: contentPushed
      };

      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
        LayoutContext.Provider,
        {
          value: {
            state: exposedState,
            actions: this.contextActions
          },
          __source: {
            fileName: _jsxFileName,
            lineNumber: 229
          }
        },
        __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
          __WEBPACK_IMPORTED_MODULE_2__styles__["d" /* Outer */],
          {
            showLeft: showLeft,
            showRight: showRight,
            leftWidth: leftWidthToUse,
            rightWidth: rightWidthToUse,
            speed: speed,
            transitionProp: transitionProp,
            transitionEasing: transitionEasing,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 235
            }
          },
          (showLeft || showRight) && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__styles__["a" /* ClickOverlay */], {
            showLeft: showLeft,
            showRight: showRight,
            leftWidth: leftWidthToUse,
            rightWidth: rightWidthToUse,
            onClick: this.onOverlayClick,
            transitionProp: transitionProp,
            transitionEasing: transitionEasing,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 245
            }
          }),
          __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
            __WEBPACK_IMPORTED_MODULE_2__styles__["b" /* Content */],
            {
              leftShown: showLeft,
              rightShown: showRight,
              blurContentOnShow: blurContentOnShowProp,
              speed: speed,
              transitionProp: transitionProp,
              transitionEasing: transitionEasing,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 255
              }
            },
            children
          ),
          LeftCmp && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
            __WEBPACK_IMPORTED_MODULE_2__styles__["c" /* Left */],
            {
              width: leftWidthToUse,
              show: showLeft,
              speed: speed,
              transitionProp: transitionProp,
              transitionEasing: transitionEasing,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 266
              }
            },
            __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeftCmp, { shown: showLeft, __source: {
                fileName: _jsxFileName,
                lineNumber: 273
              }
            })
          ),
          RightCmp && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
            __WEBPACK_IMPORTED_MODULE_2__styles__["e" /* Right */],
            {
              width: rightWidthToUse,
              show: showRight,
              speed: speed,
              transitionProp: transitionProp,
              transitionEasing: transitionEasing,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 277
              }
            },
            __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(RightCmp, { shown: showRight, __source: {
                fileName: _jsxFileName,
                lineNumber: 284
              }
            })
          )
        )
      );
    }
  }]);

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

/* harmony default export */ __webpack_exports__["b"] = (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 fullHeight = '\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n';

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

function setOuterMoveProperties(props) {
  if (props.transitionProp === 'transform') {
    return '\n      transition: transform ' + props.speed + 'ms ' + props.transitionEasing + ';\n      will-change: transform;\n      transform: translate3d(' + getOuterLeft(props) + ', 0, 0);\n    ';
  }

  return '\n    transition: left ' + props.speed + 'ms ' + props.transitionEasing + ';\n    will-change: left;\n    left: ' + getOuterLeft(props) + ';\n  ';
}

function setMoveProperties(side) {
  return function (props) {
    var width = parseInt(props.width, 10);
    var value = 0;

    if (props.transitionProp === 'transform') {
      return '\n        ' + side + ': -' + width + 'px;\n      ';
    }

    if (!props.show) {
      value = width;
    }

    return '\n      ' + side + ': -' + value + 'px;\n      transition: ' + side + ' ' + props.speed + 'ms ' + props.transitionEasing + ';\n      will-change: ' + side + ';\n    ';
  };
}

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'
}).withConfig({
  displayName: 'styles__Outer',
  componentId: 's15qbvm1-0'
})(['position:relative;', ';'], setOuterMoveProperties);

var Content = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__content'
}).withConfig({
  displayName: 'styles__Content',
  componentId: 's15qbvm1-1'
})(['position:relative;z-index:2;overflow-x:', ';background:', ';', ';', ';'], getContentOverflowX, function (p) {
  return p.background;
}, function (p) {
  return p.blurContentOnShow && '\n    transition: filter ' + function (p) {
    return p.speed;
  } + 'ms ' + function (p) {
    return p.transitionEasing;
  } + ';\n  ';
}, function (p) {
  return p.blurContentOnShow && (p.leftShown || p.rightShown) && '\n    filter: blur(' + p.blurContentOnShow + ');\n  ';
});

var Left = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__menu crystallize-layout__menu--left'
}).withConfig({
  displayName: 'styles__Left',
  componentId: 's15qbvm1-2'
})(['position:fixed;top:0;z-index:1;', ' overflow-x:hidden;overflow-y:auto;width:', ';', ';'], fullHeight, function (p) {
  return p.width || '300px';
}, setMoveProperties('left'));

var Right = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__menu crystallize-layout__menu--right'
}).withConfig({
  displayName: 'styles__Right',
  componentId: 's15qbvm1-3'
})(['position:fixed;top:0;z-index:1;', ' overflow-x:hidden;overflow-y:auto;transition:right ', 'ms ', ';width:', ';', ';'], fullHeight, function (p) {
  return p.speed;
}, function (p) {
  return p.transitionEasing;
}, function (p) {
  return p.width || '300px';
}, setMoveProperties('right'));

var ClickOverlay = __WEBPACK_IMPORTED_MODULE_0_styled_components___default.a.div.attrs({
  className: 'crystallize-layout__click-overlay'
}).withConfig({
  displayName: 'styles__ClickOverlay',
  componentId: 's15qbvm1-4'
})(['position:fixed;top:0;', ' width:100vw;z-index:3;-webkit-tap-highlight-color:rgba(0,0,0,0);', ';'], fullHeight, function getTransitionProps(props) {
  if (props.transitionProp === 'transform') {
    return 'left: 0;';
  }

  return '\n      left: ' + getOuterLeft(props) + '\n    ';
});

/***/ }),

/***/ "./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_next_head__ = __webpack_require__("next/head");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_next_head___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_next_head__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__module__ = __webpack_require__("./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; }; }();

var _jsxFileName = '/Users/hakonmartinholmsenkrogh/Documents/www/react-layout/pages/index.js';


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 left = function left() {
  return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
    'aside',
    {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 7
      }
    },
    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
      'div',
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 8
        }
      },
      'Left menu'
    ),
    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_3__module__["a" /* LayoutContext */].Consumer,
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 9
        }
      },
      function (_ref) {
        var actions = _ref.actions;
        return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
          'button',
          { onClick: actions.hideLeft, __source: {
              fileName: _jsxFileName,
              lineNumber: 10
            }
          },
          'hide'
        );
      }
    )
  );
};
var right = function right() {
  return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
    'aside',
    {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 15
      }
    },
    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
      'div',
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 16
        }
      },
      'Right menu'
    ),
    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_3__module__["a" /* LayoutContext */].Consumer,
      {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 17
        }
      },
      function (_ref2) {
        var actions = _ref2.actions;
        return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
          'button',
          { onClick: actions.hideRight, __source: {
              fileName: _jsxFileName,
              lineNumber: 18
            }
          },
          'hide'
        );
      }
    )
  );
};

var Test = function (_React$Component) {
  _inherits(Test, _React$Component);

  function Test() {
    var _ref3;

    var _temp, _this, _ret;

    _classCallCheck(this, Test);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref3 = Test.__proto__ || Object.getPrototypeOf(Test)).call.apply(_ref3, [this].concat(args))), _this), _this.state = {
      transitionProp: 'left/right'
    }, _this.onChange = function () {
      _this.setState(function (state) {
        return {
          transitionProp: state.transitionProp === 'left/right' ? 'transform' : 'left/right'
        };
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Test, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var transitionProp = this.state.transitionProp;


      return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
        'div',
        {
          __source: {
            fileName: _jsxFileName,
            lineNumber: 39
          }
        },
        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
          __WEBPACK_IMPORTED_MODULE_2_next_head___default.a,
          {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 40
            }
          },
          __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1', __source: {
              fileName: _jsxFileName,
              lineNumber: 41
            }
          })
        ),
        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
          __WEBPACK_IMPORTED_MODULE_3__module__["b" /* default */],
          {
            left: left,
            right: right,
            speed: '500',
            transitionProp: transitionProp,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 43
            }
          },
          __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
            'div',
            {
              className: 'jsx-2673675625' + ' ' + 'bg',
              __source: {
                fileName: _jsxFileName,
                lineNumber: 49
              }
            },
            __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_0_styled_jsx_style___default.a, {
              styleId: '2420946349',
              css: 'body{margin:0;}.crystallize-layout__menu{background:#f0f0f0;}aside{padding:20px;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;box-sizing:border-box;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,  */\n/*@ sourceURL=pages/index.js */'
            }),
            __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_0_styled_jsx_style___default.a, {
              styleId: '3443787597',
              css: '.bg.jsx-2673675625{background-size:cover;color:#444;}main.jsx-2673675625{text-align:center;height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}h1.jsx-2673675625{margin:0 0 15px;padding-top:10px;}button.jsx-2673675625{margin:0 10px;}main.jsx-2673675625>div.jsx-2673675625{margin-bottom:15px;}label.jsx-2673675625{display:inline-block;padding:5px 10px;margin-left:10px;background:rgba(0,0,0,0.2);border-radius:15px;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,  */\n/*@ sourceURL=pages/index.js */'
            }),
            __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
              'main',
              {
                className: 'jsx-2673675625',
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 104
                }
              },
              __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                __WEBPACK_IMPORTED_MODULE_3__module__["a" /* LayoutContext */].Consumer,
                {
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 105
                  }
                },
                function (_ref4) {
                  var state = _ref4.state,
                      actions = _ref4.actions;
                  return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                    'div',
                    {
                      className: 'jsx-2673675625',
                      __source: {
                        fileName: _jsxFileName,
                        lineNumber: 107
                      }
                    },
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                      'h1',
                      {
                        className: 'jsx-2673675625',
                        __source: {
                          fileName: _jsxFileName,
                          lineNumber: 108
                        }
                      },
                      'React layout'
                    ),
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                      'div',
                      {
                        className: 'jsx-2673675625',
                        __source: {
                          fileName: _jsxFileName,
                          lineNumber: 109
                        }
                      },
                      'Transition on',
                      ' ',
                      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                        'label',
                        {
                          className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 111
                          }
                        },
                        'left/right',
                        ' ',
                        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('input', {
                          type: 'radio',
                          checked: transitionProp === 'left/right',
                          onChange: _this2.onChange,
                          className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 113
                          }
                        })
                      ),
                      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                        'label',
                        {
                          className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 119
                          }
                        },
                        'transform',
                        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('input', {
                          type: 'radio',
                          checked: transitionProp === 'transform',
                          onChange: _this2.onChange,
                          className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 121
                          }
                        })
                      )
                    ),
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('br', {
                      className: 'jsx-2673675625',
                      __source: {
                        fileName: _jsxFileName,
                        lineNumber: 128
                      }
                    }),
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                      'div',
                      {
                        className: 'jsx-2673675625',
                        __source: {
                          fileName: _jsxFileName,
                          lineNumber: 129
                        }
                      },
                      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                        'button',
                        { onClick: actions.showLeft, className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 130
                          }
                        },
                        'Show left'
                      ),
                      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                        'button',
                        { onClick: actions.showRight, className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 131
                          }
                        },
                        'Show right'
                      )
                    ),
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('br', {
                      className: 'jsx-2673675625',
                      __source: {
                        fileName: _jsxFileName,
                        lineNumber: 133
                      }
                    }),
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('hr', {
                      className: 'jsx-2673675625',
                      __source: {
                        fileName: _jsxFileName,
                        lineNumber: 134
                      }
                    }),
                    __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                      'div',
                      {
                        className: 'jsx-2673675625',
                        __source: {
                          fileName: _jsxFileName,
                          lineNumber: 136
                        }
                      },
                      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                        'div',
                        {
                          className: 'jsx-2673675625',
                          __source: {
                            fileName: _jsxFileName,
                            lineNumber: 137
                          }
                        },
                        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                          'div',
                          {
                            className: 'jsx-2673675625',
                            __source: {
                              fileName: _jsxFileName,
                              lineNumber: 138
                            }
                          },
                          'Left shown? ',
                          state.leftShown ? 'yes' : 'no'
                        ),
                        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                          'div',
                          {
                            className: 'jsx-2673675625',
                            __source: {
                              fileName: _jsxFileName,
                              lineNumber: 139
                            }
                          },
                          'Right shown? ',
                          state.rightShown ? 'yes' : 'no'
                        ),
                        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
                          'div',
                          {
                            className: 'jsx-2673675625',
                            __source: {
                              fileName: _jsxFileName,
                              lineNumber: 142
                            }
                          },
                          'Content pushed: ',
                          state.contentPushed
                        )
                      )
                    )
                  );
                }
              )
            )
          )
        )
      );
    }
  }]);

  return Test;
}(__WEBPACK_IMPORTED_MODULE_1_react___default.a.Component);

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

/***/ }),

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

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


/***/ }),

/***/ "is-callable":
/***/ (function(module, exports) {

module.exports = require("is-callable");

/***/ }),

/***/ "next/head":
/***/ (function(module, exports) {

module.exports = require("next/head");

/***/ }),

/***/ "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");

/***/ })

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