@fenderdigital/react-menu/es/SubMenu.js

Fender React UI Kit Menu Component

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import styled from 'styled-components';
import isActiveMenuItem from './MenuUtils';
var SubMenu = function (_a) {
    var className = _a.className, items = _a.items, onClick = _a.onClick, pathname = _a.pathname, parentLabel = _a.parentLabel;
    if (!items)
        return null;
    return (React.createElement("ul", { className: "submenu " + className, "data-id": "menu-submenu" }, items.map(function (item) { return (React.createElement("li", { key: "menu-submenu-item-" + item.id },
        React.createElement("button", { className: "submenu-button " + (isActiveMenuItem(pathname, item.url) ? 'is-active' : ''), "data-id": "menu-submenu-button" + (parentLabel ? "-" + parentLabel : '') + "-" + item.id, onClick: function () {
                onClick('button', item.label, item.url);
            } }, item.label))); })));
};
var StyledSubMenu = styled(SubMenu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 1rem;\n  padding-left: 2.5rem;\n  list-style-type: none;\n\n  /**\n   * Submenu Button\n   */\n  .submenu-button {\n    display: block;\n    border: 0;\n    padding: 0.5rem 0;\n    width: 100%;\n\n    background-color: transparent;\n\n    font-family: 'SourceSansPro-Regular';\n    color: #999;\n    text-align: left;\n\n    cursor: pointer;\n    outline: 0;\n    transition: all 0.3s ease;\n\n    &.is-active {\n      color: #d52b1e;\n      &:hover {\n        color: #d52b1e;\n      }\n    }\n\n    &:hover {\n      background-color: transparent;\n      color: #000;\n    }\n  }\n"], ["\n  margin: 0;\n  margin-left: 1rem;\n  padding-left: 2.5rem;\n  list-style-type: none;\n\n  /**\n   * Submenu Button\n   */\n  .submenu-button {\n    display: block;\n    border: 0;\n    padding: 0.5rem 0;\n    width: 100%;\n\n    background-color: transparent;\n\n    font-family: 'SourceSansPro-Regular';\n    color: #999;\n    text-align: left;\n\n    cursor: pointer;\n    outline: 0;\n    transition: all 0.3s ease;\n\n    &.is-active {\n      color: #d52b1e;\n      &:hover {\n        color: #d52b1e;\n      }\n    }\n\n    &:hover {\n      background-color: transparent;\n      color: #000;\n    }\n  }\n"])));
StyledSubMenu.defaultProps = {
    className: '',
};
export default StyledSubMenu;
var templateObject_1;