react-base-guide/lib/components/burger/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const add_custom_style_1 = require("../../utils/add-custom-style");
const Wrapper = styled_components_1.default.button `
  position: relative;
  height: 30px;
  border: none;
  outline: none;
  background: transparent;
  transition: background 0.3s;
  cursor: pointer;
  user-select: none;
  z-index: ${p => p.theme.zIndex.absolute};

  ${p => (0, add_custom_style_1.addCustomStyle)(p.$styled)}
`;
const Span = styled_components_1.default.span `
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: ${p => p.theme.palette.text.primary};
  transition: background 0.3s;
  &::before, &::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: ${p => p.theme.palette.text.primary};
    content: '';
    transition: top 0.3s, bottom 0.3s, transform 0.3s;
  }
  &::before {
    top: -10px;
  }
  &::after {
    bottom: -10px;
  }
  
  ${p => p.close && `
    background: none;
    &::before {
      top: 0;
      transform: rotate(45deg);
    }
    &::after {
      bottom: 0;
      transform: rotate(-45deg);
    }
  `}
`;
const getProps = (p) => {
    let props = Object.assign({}, p);
    delete props.styled;
    delete props.close;
    return props;
};
const Burger = (props) => ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, getProps(props), { "$styled": props.styled }, { children: (0, jsx_runtime_1.jsx)(Span, { close: props.close }) })));
exports.default = Burger;
//# sourceMappingURL=index.js.map