@hackoregon/component-library/dist/Navigation/NavSubMenu.js

Official repo for Hack Oregon React component library

"use strict";

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

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

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

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

var _emotion = require("emotion");

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

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, _emotion.css)(_templateObject());
var hiddenClass = (0, _emotion.css)(_templateObject2());
var nestedMenuClass = (0, _emotion.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 _react["default"].createElement("div", {
    className: "".concat(nestedMenuClass, " ").concat(isVisible ? visibleClass : hiddenClass)
  }, items.map(function (item, index) {
    return _react["default"].createElement(_reactRouter.Link, {
      key: index,
      to: pathOrName(item.path, item.name)
    }, _react["default"].createElement("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;