"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Header = exports.HeaderLayout = exports.HEADER_TOGGLE_LABEL = exports.HEADER_REM = void 0;

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

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

var _components = require("@looker/components");

var _icons = require("@looker/icons");

var _Menu = require("@styled-icons/material/Menu");

var _Link = require("../Link");

var _SelectorContainer = require("../SelectorContainer");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var HEADER_REM = 4;
exports.HEADER_REM = HEADER_REM;
var HEADER_TOGGLE_LABEL = 'Toggle Navigation';
exports.HEADER_TOGGLE_LABEL = HEADER_TOGGLE_LABEL;

var HeaderLayout = _ref => {
  var {
    className,
    spec,
    toggleNavigation
  } = _ref;
  return _react.default.createElement(_components.Header, {
    height: "".concat(HEADER_REM, "rem"),
    className: className,
    pl: "small",
    pr: "large"
  }, _react.default.createElement(_components.Space, null, _react.default.createElement(_components.IconButton, {
    size: "small",
    onClick: () => toggleNavigation(),
    icon: _react.default.createElement(_Menu.Menu, null),
    "aria-label": "nav toggle",
    label: HEADER_TOGGLE_LABEL
  }), _react.default.createElement(_Link.Link, {
    to: "/".concat(spec.key)
  }, _react.default.createElement(_components.Space, {
    gap: "small"
  }, _react.default.createElement(_components.Icon, {
    icon: _react.default.createElement(_icons.LookerLogo, null),
    alt: "Looker",
    color: "text5",
    style: {
      width: '82px'
    }
  }), _react.default.createElement(_components.Heading, {
    color: "key"
  }, "API Explorer")))), _react.default.createElement(_SelectorContainer.SelectorContainer, {
    spec: spec
  }));
};

exports.HeaderLayout = HeaderLayout;
var Header = (0, _styledComponents.default)(HeaderLayout).withConfig({
  displayName: "Header",
  componentId: "sc-1mlhas2-0"
})(["border-bottom:1px solid ", ";"], _ref2 => {
  var {
    theme
  } = _ref2;
  return theme.colors.ui2;
});
exports.Header = Header;
//# sourceMappingURL=Header.js.map