"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.NavigationSkeleton = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

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

var _profile = require("../../profile.context");

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var NavigationSkeleton = function NavigationSkeleton(_ref) {
  var url = _ref.url,
      header = _ref.header,
      children = _ref.children;

  var _useProfileState = (0, _profile.useProfileState)(),
      profileTab = _useProfileState.profileTab;

  var dispatch = (0, _profile.useProfileDispatch)();
  var isActive = profileTab === url;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    isActive: isActive
  }, /*#__PURE__*/_react["default"].createElement(Inner, {
    hide: !isActive
  }, /*#__PURE__*/_react["default"].createElement(CloseIconSVG, {
    onClick: function onClick() {
      return dispatch({
        type: 'reset'
      });
    },
    viewBox: "0 0 40 40"
  }, /*#__PURE__*/_react["default"].createElement("path", {
    d: "M 10,10 L 30,30 M 30,10 L 10,30"
  })), /*#__PURE__*/_react["default"].createElement(Header, {
    hide: !isActive
  }, header), isActive && children));
};

exports.NavigationSkeleton = NavigationSkeleton;

var CloseIconSVG = _styledComponents["default"].svg(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  stroke: black;\n  fill: transparent;\n  stroke-linecap: round;\n  stroke-width: 3;\n  width: 2rem;\n  height: 2rem;\n\n  @media (min-width: ", ") {\n    display: none;\n  }\n\n  position: absolute;\n  top: 2.5rem;\n  right: 1.4rem;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Container = _styledComponents["default"].div.attrs({
  className: 'px-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    position: relative;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: fit-content;\n    background: rgb(255, 255, 255);\n    z-index: 2;\n    overflow-y: hidden;\n    overflow-x: scroll;\n\n    transform: translate3d(100%, 0px, 0px);\n    transition-duration: 250ms;\n    transition-property: transform;\n\n    ", "\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  return props.isActive && "\n      transform: translate3d(0px, 0px, 0px);\n      transition-duration: 300ms;\n\n    ";
});

var Inner = _styledComponents["default"].div.attrs({
  className: 'py-3 mx-auto'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 76.8rem;\n\n  @media only screen and (min-width: ", ") {\n    padding-top: 0 !important;\n    transition: opacity 0.3s ease, transform 0.3s ease;\n    opacity: ", ";\n    transform: ", ";\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.hide ? 0 : 1;
}, function (props) {
  return props.hide ? 'translateX(-40px)' : 'translateX(0)';
});

var Header = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h2',
  variant: 3,
  className: 'mb-3 mb-lg-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: ", ";\n  transition: opacity 0.3s ease;\n\n  @media only screen and (min-width: ", ") {\n    transition: none;\n  }\n"])), function (props) {
  return props.hide ? 'none' : 'block';
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map