import { __makeTemplateObject } from "tslib";
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import { Fragment, useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import { Link, withRouter } from 'react-router-dom';
import logo from './dash4_512.png';
function getInitialSelected(_a) {
    var tabs = _a.tabs, location = _a.location;
    var selected = tabs[0];
    tabs.forEach(function (tab, index) {
        if (location.pathname === "/" + tab ||
            location.pathname.indexOf("/" + tab + "/") === 0 ||
            (location.pathname === '/' && index === 0)) {
            selected = tabs[index];
        }
    });
    return selected;
}
var linkStyles = "\n\t& a {\n\t\tcolor: var(--gray);\n\t\ttext-decoration: none;\n\t\tborder-bottom: 1px solid var(--gray);\n\t\t&:hover {\n\t\t\tcolor: var(--gray-dark);\n\t\t\tborder-color: var(--gray-dark);\n\t\t}\n\t}\n";
var RawHeader = function (props) {
    var location = props.location, tabs = props.tabs, history = props.history;
    var _a = useState(getInitialSelected(props)), selected = _a[0], setSelected = _a[1];
    var _b = useState(false), showInfoModal = _b[0], setShowInfoModal = _b[1];
    function handleHideInfoModal(event) {
        if (event) {
            event.preventDefault();
        }
        setShowInfoModal(false);
    }
    function handleShowInfoModal(event) {
        event.preventDefault();
        setShowInfoModal(true);
    }
    return (jsx("header", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\t\tposition: relative;\n\t\t\t\tbackground: #fff;\n\t\t\t\tborder-bottom: 1px solid #eaeaea;\n\t\t\t"], ["\n\t\t\t\tposition: relative;\n\t\t\t\tbackground: #fff;\n\t\t\t\tborder-bottom: 1px solid #eaeaea;\n\t\t\t"]))) },
        jsx("a", { href: "/", onClick: handleShowInfoModal },
            jsx("img", { css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\twidth: 35px;\n\t\t\t\t\t\tmargin: 5px 15px;\n\t\t\t\t\t"], ["\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\twidth: 35px;\n\t\t\t\t\t\tmargin: 5px 15px;\n\t\t\t\t\t"]))), src: logo, alt: "Dash4 Logo" })),
        jsx(Modal, { show: showInfoModal, onHide: handleHideInfoModal },
            jsx(Modal.Header, { closeButton: true, css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\tpadding: 10px 12px 0 0;\n\t\t\t\t\t\t& .close span {\n\t\t\t\t\t\t\tfont-weight: 200;\n\t\t\t\t\t\t}\n\t\t\t\t\t"], ["\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\tpadding: 10px 12px 0 0;\n\t\t\t\t\t\t& .close span {\n\t\t\t\t\t\t\tfont-weight: 200;\n\t\t\t\t\t\t}\n\t\t\t\t\t"]))) }),
            jsx(Modal.Body, { css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\t\t\t\tpadding-top: 0;\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\t& img {\n\t\t\t\t\t\t\tmargin-left: 14px;\n\t\t\t\t\t\t\tmargin-bottom: 1.5rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t& ul {\n\t\t\t\t\t\t\tlist-style: none;\n\t\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t& ul + ul {\n\t\t\t\t\t\t\tmargin-top: 0.5rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t& .btn {\n\t\t\t\t\t\t\tpadding: 0.1rem 1.5rem;\n\t\t\t\t\t\t\tmin-width: 200px;\n\t\t\t\t\t\t\tmargin-top: 10px;\n\t\t\t\t\t\t}\n\t\t\t\t\t"], ["\n\t\t\t\t\t\tpadding-top: 0;\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\t& img {\n\t\t\t\t\t\t\tmargin-left: 14px;\n\t\t\t\t\t\t\tmargin-bottom: 1.5rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t& ul {\n\t\t\t\t\t\t\tlist-style: none;\n\t\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t& ul + ul {\n\t\t\t\t\t\t\tmargin-top: 0.5rem;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t& .btn {\n\t\t\t\t\t\t\tpadding: 0.1rem 1.5rem;\n\t\t\t\t\t\t\tmin-width: 200px;\n\t\t\t\t\t\t\tmargin-top: 10px;\n\t\t\t\t\t\t}\n\t\t\t\t\t"]))) },
                jsx("img", { width: "84", src: logo, alt: "Dash4 Logo" }),
                jsx("ul", { css: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\t\t\t& li {\n\t\t\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\t\t\tcolor: var(--gray);\n\t\t\t\t\t\t\t\t", "\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t& strong {\n\t\t\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t"], ["\n\t\t\t\t\t\t\t& li {\n\t\t\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\t\t\tcolor: var(--gray);\n\t\t\t\t\t\t\t\t", "\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t& strong {\n\t\t\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t"])), linkStyles) },
                    props.version && (jsx("li", null,
                        jsx("strong", null, "version"),
                        " ",
                        props.version)),
                    jsx("li", null,
                        jsx("strong", null, "github"),
                        ' ',
                        jsx("a", { target: "_blank", rel: "noreferrer noopener", href: "https://github.com/smollweide/dash4/blob/master/README.md#------" }, "dash4 on github")),
                    jsx("li", null,
                        jsx("strong", null, "cli"),
                        ' ',
                        jsx("a", { target: "_blank", rel: "noreferrer noopener", href: "https://github.com/smollweide/dash4/blob/master/packages/cli/README.md#dash4-cli" }, "dash4 cli on github"))),
                jsx("ul", null,
                    jsx("li", null,
                        jsx(Button, { as: "a", size: "sm", target: "_blank", variant: "outline-primary", href: "https://github.com/smollweide/dash4#plugins" }, "add plugin")),
                    jsx("li", null,
                        jsx(Button, { as: "a", size: "sm", target: "_blank", variant: "outline-secondary", href: "https://github.com/smollweide/dash4/issues/new" }, "report issue")))),
            jsx(Modal.Footer, { css: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\tdisplay: inline;\n\t\t\t\t\t\tcolor: var(--gray);\n\t\t\t\t\t\t", "\n\t\t\t\t\t"], ["\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\tdisplay: inline;\n\t\t\t\t\t\tcolor: var(--gray);\n\t\t\t\t\t\t", "\n\t\t\t\t\t"])), linkStyles) },
                "Dash4 is",
                ' ',
                jsx("a", { target: "_blank", rel: "noreferrer noopener", href: "https://github.com/smollweide/dash4/blob/master/LICENSE" }, "MIT licensed"))),
        jsx("ul", { css: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tflex-wrap: nowrap;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\talign-content: center;\n\t\t\t\t\tpadding: 15px 0 0 0;\n\t\t\t\t\tmargin: 0 15px 0 65px;\n\t\t\t\t\t@media screen and (min-width: ", "px) {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t}\n\t\t\t\t"], ["\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tflex-wrap: nowrap;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\talign-content: center;\n\t\t\t\t\tpadding: 15px 0 0 0;\n\t\t\t\t\tmargin: 0 15px 0 65px;\n\t\t\t\t\t@media screen and (min-width: ", "px) {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t}\n\t\t\t\t"])), props.tabs.length * 70) }, tabs.map(function (tab, index) {
            var classNames = [
                "\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\ttext-align: left;\n\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\ttransition: color 0.5s, text-decoration 0.5s;\n\t\t\t\t\t\t\tborder: 1px solid transparent;\n\t\t\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\t\tpadding: 6px 12px;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tcolor: #999;\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tcolor: #000;\n\t\t\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t",
            ];
            var isActive = false;
            if (location.pathname === "/" + tab ||
                location.pathname.indexOf("/" + tab + "/") === 0 ||
                (location.pathname === '/' && index === 0)) {
                isActive = true;
                classNames.push("\n\t\t\t\t\t\t\tbackground: #fafafa;\n\t\t\t\t\t\t\tborder-color: #eaeaea;\n\t\t\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t\t\t\tborder-top-left-radius: 8px;\n\t\t\t\t\t\t\tborder-top-right-radius: 8px;\n\t\t\t\t\t\t\tcolor: #000;\n\t\t\t\t\t\t");
            }
            return (jsx("li", { key: tab, style: { width: 100 / tabs.length + "%" }, css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\t\t\t\t\t\tposition: relative;\n\t\t\t\t\t\t\t\tlist-style: none;\n\t\t\t\t\t\t\t\tmargin-right: -1px;\n\t\t\t\t\t\t\t\tmax-width: 100px;\n\t\t\t\t\t\t\t\t& + &:before {\n\t\t\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\t\t\twidth: 1px;\n\t\t\t\t\t\t\t\t\ttop: 8px;\n\t\t\t\t\t\t\t\t\tbottom: 8px;\n\t\t\t\t\t\t\t\t\tbackground: #eaeaea;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t"], ["\n\t\t\t\t\t\t\t\tposition: relative;\n\t\t\t\t\t\t\t\tlist-style: none;\n\t\t\t\t\t\t\t\tmargin-right: -1px;\n\t\t\t\t\t\t\t\tmax-width: 100px;\n\t\t\t\t\t\t\t\t& + &:before {\n\t\t\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\t\t\twidth: 1px;\n\t\t\t\t\t\t\t\t\ttop: 8px;\n\t\t\t\t\t\t\t\t\tbottom: 8px;\n\t\t\t\t\t\t\t\t\tbackground: #eaeaea;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t"]))) },
                isActive && (jsx(Fragment, null,
                    jsx("span", { css: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\t\t\t\t\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\t\t\t\t\t\theight: 8px;\n\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\tbottom: -1px;\n\t\t\t\t\t\t\t\t\t\t\tleft: -7px;\n\t\t\t\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcircle 8px at top left,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 7px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#eaeaea 8px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#fafafa 8px\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t"], ["\n\t\t\t\t\t\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\t\t\t\t\t\theight: 8px;\n\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\tbottom: -1px;\n\t\t\t\t\t\t\t\t\t\t\tleft: -7px;\n\t\t\t\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcircle 8px at top left,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 7px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#eaeaea 8px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#fafafa 8px\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t"]))) }),
                    jsx("span", { css: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\tbackground: #fafafa;\n\t\t\t\t\t\t\t\t\t\t\theight: 3px;\n\t\t\t\t\t\t\t\t\t\t\tbottom: -1px;\n\t\t\t\t\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\t\t\t\t\tright: 0;\n\t\t\t\t\t\t\t\t\t\t"], ["\n\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\tbackground: #fafafa;\n\t\t\t\t\t\t\t\t\t\t\theight: 3px;\n\t\t\t\t\t\t\t\t\t\t\tbottom: -1px;\n\t\t\t\t\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\t\t\t\t\tright: 0;\n\t\t\t\t\t\t\t\t\t\t"]))) }),
                    jsx("span", { css: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\t\t\t\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\t\t\t\t\t\tright: -7px;\n\t\t\t\t\t\t\t\t\t\t\theight: 8px;\n\t\t\t\t\t\t\t\t\t\t\tbottom: -1px;\n\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\t\tright: 0;\n\t\t\t\t\t\t\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcircle 8px at top right,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 7px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#eaeaea 8px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#fafafa 8px\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t"], ["\n\t\t\t\t\t\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\t\t\t\t\t\tright: -7px;\n\t\t\t\t\t\t\t\t\t\t\theight: 8px;\n\t\t\t\t\t\t\t\t\t\t\tbottom: -1px;\n\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\t\t\t\tright: 0;\n\t\t\t\t\t\t\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcircle 8px at top right,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransparent 7px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#eaeaea 8px,\n\t\t\t\t\t\t\t\t\t\t\t\t\t#fafafa 8px\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t"]))) }))),
                jsx(Link, { title: tab, css: css(classNames.join(' ')), to: index === 0 ? '/' : "/" + tab }, tab)));
        })),
        jsx("div", { css: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t@media screen and (min-width: ", "px) {\n\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t}\n\t\t\t\t"], ["\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t@media screen and (min-width: ", "px) {\n\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t}\n\t\t\t\t"])), props.tabs.length * 70) },
            jsx("div", { css: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\tpadding: 11px 0;\n\t\t\t\t\t"], ["\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\tpadding: 11px 0;\n\t\t\t\t\t"]))) }, selected),
            jsx("div", { css: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\twidth: 24px;\n\t\t\t\t\t\theight: 18px;\n\t\t\t\t\t\tright: 20px;\n\t\t\t\t\t\ttop: 14px;\n\t\t\t\t\t\tborder-top: 2px solid #000;\n\t\t\t\t\t\tborder-bottom: 2px solid #000;\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\ttop: 6px;\n\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\tborder-top: 2px solid #000;\n\t\t\t\t\t\t}\n\t\t\t\t\t"], ["\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\twidth: 24px;\n\t\t\t\t\t\theight: 18px;\n\t\t\t\t\t\tright: 20px;\n\t\t\t\t\t\ttop: 14px;\n\t\t\t\t\t\tborder-top: 2px solid #000;\n\t\t\t\t\t\tborder-bottom: 2px solid #000;\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\ttop: 6px;\n\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\tborder-top: 2px solid #000;\n\t\t\t\t\t\t}\n\t\t\t\t\t"]))) }),
            jsx("select", { value: selected, css: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\toutline: 0;\n\t\t\t\t\t\tfont-size: 0;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\tappearance: none;\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tright: 15px;\n\t\t\t\t\t\twidth: calc(100% - 65px - 15px);\n\t\t\t\t\t\ttop: 3px;\n\t\t\t\t\t"], ["\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\toutline: 0;\n\t\t\t\t\t\tfont-size: 0;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\ttext-align: center;\n\t\t\t\t\t\tappearance: none;\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tright: 15px;\n\t\t\t\t\t\twidth: calc(100% - 65px - 15px);\n\t\t\t\t\t\ttop: 3px;\n\t\t\t\t\t"]))), onChange: function (event) {
                    var value = event.currentTarget.value;
                    setSelected(value);
                    history.push(value === tabs[0] ? '/' : "/" + value);
                } }, tabs.map(function (tab) {
                return (jsx("option", { key: tab, value: tab }, tab));
            })))));
};
// TODO fix issue since typescript 3.6.x
export var Header = withRouter(RawHeader);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
//# sourceMappingURL=index.js.map