import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useProfileState, useProfileDispatch } from '../../profile.context';
import { Typography } from '../../../Common';
export var NavigationSkeleton = (_ref) => {
  var {
    url,
    header,
    children
  } = _ref;
  var {
    profileTab
  } = useProfileState();
  var dispatch = useProfileDispatch();
  var isActive = profileTab === url;
  return /*#__PURE__*/React.createElement(Container, {
    isActive: isActive
  }, /*#__PURE__*/React.createElement(Inner, {
    hide: !isActive
  }, /*#__PURE__*/React.createElement(CloseIconSVG, {
    onClick: () => dispatch({
      type: 'reset'
    }),
    viewBox: "0 0 40 40"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M 10,10 L 30,30 M 30,10 L 10,30"
  })), /*#__PURE__*/React.createElement(Header, {
    hide: !isActive
  }, header), isActive && children));
};
var CloseIconSVG = styled.svg(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Container = styled.div.attrs({
  className: 'px-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
}, props => props.isActive && "\n      transform: translate3d(0px, 0px, 0px);\n      transition-duration: 300ms;\n\n    ");
var Inner = styled.div.attrs({
  className: 'py-3 mx-auto'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
}, props => props.hide ? 0 : 1, props => props.hide ? 'translateX(-40px)' : 'translateX(0)');
var Header = styled(Typography).attrs({
  as: 'h2',
  variant: 3,
  className: 'mb-3 mb-lg-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  transition: opacity 0.3s ease;\n\n  @media only screen and (min-width: ", ") {\n    transition: none;\n  }\n"])), props => props.hide ? 'none' : 'block', (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map