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

Official repo for Hack Oregon React component library

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) } })); }

import PropTypes from "prop-types";
import React from "react";
import { Link } from "react-router";
import { css } from "emotion";
var visibleClass = css(_templateObject());
var hiddenClass = css(_templateObject2());
var nestedMenuClass = 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.createElement("div", {
    className: "".concat(nestedMenuClass, " ").concat(isVisible ? visibleClass : hiddenClass)
  }, items.map(function (item, index) {
    return React.createElement(Link, {
      key: index,
      to: pathOrName(item.path, item.name)
    }, React.createElement("span", {
      className: "nested-menu-link"
    }, item.name));
  }));
};

NavSubMenu.displayName = "NavSubMenu";
NavSubMenu.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({})),
  isVisible: PropTypes.bool
};
export default NavSubMenu;