opendash/dist/components/Hamburger.js

open.DASH data visualization framework

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import * as React from "react";
import styled from "styled-components";
var HEIGHT = 32;
var WIDTH = 32;
var STRENGTH = 2;
var OFFSET = 8;
var COLOR = "#444444";
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  position: relative;\n  margin: ", "px 0;\n\n  transform: rotate(0deg);\n  transition: 0.5s ease-in-out;\n  cursor: pointer;\n\n  span {\n    display: block;\n    position: absolute;\n    height: ", "px;\n    width: 100%;\n    background: ", ";\n    opacity: 1;\n    left: 0;\n    transform: rotate(0deg);\n    transition: 0.25s ease-in-out;\n    &:nth-child(1) {\n      top: 0px;\n    }\n    &:nth-child(2),\n    &:nth-child(3) {\n      top: ", "px;\n    }\n    &:nth-child(4) {\n      top: ", "px;\n    }\n  }\n\n  &.open {\n    span {\n      &:nth-child(1),\n      &:nth-child(4) {\n        top: 18px;\n        width: 0%;\n        left: 50%;\n      }\n      &:nth-child(2) {\n        transform: rotate(45deg);\n      }\n      &:nth-child(3) {\n        transform: rotate(-45deg);\n      }\n    }\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  position: relative;\n  margin: ", "px 0;\n\n  transform: rotate(0deg);\n  transition: 0.5s ease-in-out;\n  cursor: pointer;\n\n  span {\n    display: block;\n    position: absolute;\n    height: ", "px;\n    width: 100%;\n    background: ", ";\n    opacity: 1;\n    left: 0;\n    transform: rotate(0deg);\n    transition: 0.25s ease-in-out;\n    &:nth-child(1) {\n      top: 0px;\n    }\n    &:nth-child(2),\n    &:nth-child(3) {\n      top: ", "px;\n    }\n    &:nth-child(4) {\n      top: ", "px;\n    }\n  }\n\n  &.open {\n    span {\n      &:nth-child(1),\n      &:nth-child(4) {\n        top: 18px;\n        width: 0%;\n        left: 50%;\n      }\n      &:nth-child(2) {\n        transform: rotate(45deg);\n      }\n      &:nth-child(3) {\n        transform: rotate(-45deg);\n      }\n    }\n  }\n"])), WIDTH, HEIGHT, (HEIGHT - OFFSET * 2 - STRENGTH) / 2, STRENGTH, COLOR, OFFSET, OFFSET * 2);
export var Hamburger = React.memo(function Hamburger(_a) {
    var open = _a.open, setOpen = _a.setOpen;
    return (React.createElement(Container, { className: open ? "open" : undefined, onClick: function () {
            setOpen(!open);
        } },
        React.createElement("span", null),
        React.createElement("span", null),
        React.createElement("span", null),
        React.createElement("span", null)));
});
var templateObject_1;
//# sourceMappingURL=Hamburger.js.map