"use strict";

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactRouter = require("react-router");

var _core = require("@emotion/core");

var _shortid = _interopRequireDefault(require("shortid"));

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

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  & a {\n    color: rgba(255, 255, 255, 0.65);\n    flex: 1;\n    display: block;\n    font-family: \"Rubik\", sans-serif;\n    font-size: 1.25rem;\n    border: none;\n    text-transform: uppercase;\n    text-decoration: none;\n    padding: 1rem;\n    text-align: center;\n  }\n\n  &:hover {\n    color: rgba(255, 255, 255, 0.85);\n    text-decoration: none;\n  }\n\n  @media (min-width: 641px) {\n    position: absolute;\n    z-index: 1500;\n    margin-top: 0;\n    width: 200px;\n    background-color: #fff;\n    padding: 20px;\n    transition: all 0.5s cubic-bezier(0.42, 0, 0.14, 1);\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      bottom: 100%;\n      left: 50%;\n      margin-left: -24px;\n      border-width: 12px;\n      border-style: solid;\n      border-color: transparent transparent #fff transparent;\n    }\n\n    & a {\n      color: rgb(238, 73, 92);\n      padding: 5px 0;\n      text-align: left;\n      font-size: 16px;\n      flex: 1;\n      display: block;\n      font-family: \"Rubik\", sans-serif;\n      text-transform: uppercase;\n      text-decoration: none;\n      border: none;\n    }\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  visibility: hidden;\n  opacity: 0;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  visibility: visible;\n  opacity: 1;\n  margin-top: 10px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var visibleClass = (0, _core.css)(_templateObject());
var hiddenClass = (0, _core.css)(_templateObject2());
var nestedMenuClass = (0, _core.css)(_templateObject3());

var pathOrName = function pathOrName(p, n) {
  return p || "/".concat(n.toLowerCase());
};

var NavSubMenu = function NavSubMenu(_ref) {
  var items = _ref.items,
      isVisible = _ref.isVisible;
  return (0, _core.jsx)("div", {
    css: (0, _core.css)(_templateObject4(), nestedMenuClass, isVisible ? visibleClass : hiddenClass)
  }, items.map(function (item) {
    return (0, _core.jsx)(_reactRouter.Link, {
      key: _shortid["default"].generate(),
      to: pathOrName(item.path, item.name)
    }, (0, _core.jsx)("span", {
      className: "nested-menu-link"
    }, item.name));
  }));
};

NavSubMenu.displayName = "NavSubMenu";
NavSubMenu.propTypes = {
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
  isVisible: _propTypes["default"].bool
};
var _default = NavSubMenu;
exports["default"] = _default;