react-demo-page/lib/components/NavToggle/index.js

Build a demo page for your react component with ease

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _this = void 0,
    _jsxFileName = "/Users/cedricdelpoux/Development/perso/react-demo-page/src/components/NavToggle/index.js";

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

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 4px;\n  background-color: white;\n  position: absolute;\n  top: 28px;\n  left: 15px;\n  transition-duration: 0.3s;\n\n  &:before,\n  &:after {\n    width: 30px;\n    height: 4px;\n    background-color: white;\n    content: \"\";\n    position: absolute;\n    left: 0;\n    transition-duration: 0.3s;\n    transition-timing-function: swing;\n  }\n\n  &:before {\n    top: -9px;\n    transform: ", ";\n  }\n\n  &:after {\n    top: 9px;\n    transform: ", ";\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  width: 60px;\n  height: 60px;\n  border: 0;\n  background: none;\n  cursor: pointer;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }

var Button = _styledComponents["default"].span(_templateObject());

var Icon = _styledComponents["default"].span(_templateObject2(), function (props) {
  return props.open ? "0" : "30px";
}, function (props) {
  return props.open ? "translateY(9px) rotate(45deg)" : "";
}, function (props) {
  return props.open ? "translateY(-9px) rotate(-45deg)" : "";
});

var NavToggle = function NavToggle(_ref) {
  var onClick = _ref.onClick,
      open = _ref.open;
  return /*#__PURE__*/_react["default"].createElement(Button, {
    onClick: onClick,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 3
    }
  }, /*#__PURE__*/_react["default"].createElement(Icon, {
    open: open,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 5
    }
  }));
};

NavToggle.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: _propTypes["default"].func.isRequired,
  open: _propTypes["default"].bool.isRequired
} : {};
var _default = NavToggle;
exports["default"] = _default;
module.exports = exports.default;