@mui-treasury/mockup/brands/reactjs/ReactHeader.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Box = _interopRequireDefault(require("@material-ui/core/Box"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var Menu = function Menu(_ref) {
  var active = _ref.active,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, ["active", "children"]);

  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
    display: 'inline-flex',
    alignItems: 'center',
    alignSelf: 'stretch',
    position: 'relative',
    px: 2,
    color: active ? 'secondary.main' : 'common.white',
    fontSize: 18
  }, props), children, active && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: '100%',
    bgcolor: 'secondary.main',
    height: 4
  }));
};

var ReactHeader = function ReactHeader(_ref2) {
  var concise = _ref2.concise;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    display: 'flex',
    alignItems: 'center',
    mr: 2,
    css: {
      flexShrink: 0,
      flexBasis: 'calc(100% / 6)'
    }
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K',
    alt: 'react logo',
    style: {
      height: 20
    }
  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    color: 'secondary',
    variant: 'h6',
    style: {
      marginLeft: 8
    }
  }, /*#__PURE__*/_react["default"].createElement("b", null, "React"))), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    component: 'nav',
    display: 'flex',
    alignItems: 'center',
    alignSelf: 'stretch',
    overflow: 'auto'
  }, /*#__PURE__*/_react["default"].createElement(Menu, {
    active: true
  }, "Docs"), /*#__PURE__*/_react["default"].createElement(Menu, null, "Tutorial"), /*#__PURE__*/_react["default"].createElement(Menu, null, "Blog"), /*#__PURE__*/_react["default"].createElement(Menu, null, "Community")), !concise && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    ml: 'auto'
  }, /*#__PURE__*/_react["default"].createElement(Menu, {
    fontSize: 16
  }, "v16.12.0"), /*#__PURE__*/_react["default"].createElement(Menu, {
    fontSize: 16
  }, "Languages"), /*#__PURE__*/_react["default"].createElement(Menu, {
    fontSize: 16
  }, "Github")));
};

var _default = ReactHeader;
exports["default"] = _default;