@fenderdigital/react-menu/lib/MenuMobileContent.js

Fender React UI Kit Menu Component

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var MenuAccordion_1 = __importDefault(require("./MenuAccordion"));
var MenuCTA_1 = __importDefault(require("./MenuCTA"));
var MenuUtils_1 = __importDefault(require("./MenuUtils"));
var Menu_1 = require("./Menu");
var MenuMobileContent = function (_a) {
    var className = _a.className, firstName = _a.firstName, onClick = _a.onClick, pathname = _a.pathname, primary = _a.primary, profileUrl = _a.profileUrl, secondary = _a.secondary, signOutUrl = _a.signOutUrl;
    return (react_1.default.createElement("section", { className: "menu-mobile-content " + className, "data-id": "menu-mobile-content" },
        react_1.default.createElement("header", { className: "menu-mobile-header" },
            react_1.default.createElement("button", { "data-id": "menu-mobile-content-close-button", type: "button", onClick: function () { return onClick('close'); } },
                react_1.default.createElement("i", { className: "icon-x" }))),
        react_1.default.createElement("nav", { className: "menu-mobile-content-nav" },
            react_1.default.createElement("ul", null, Array.isArray(primary)
                ? primary.map(function (item) { return (react_1.default.createElement("li", { key: "menu-mobile-content-item-primary-" + item.id }, item.items ? (react_1.default.createElement(MenuAccordion_1.default, { icon: item.icon, id: item.id, items: item.items, isActive: MenuUtils_1.default(pathname, item.url), isMobile: true, label: item.label, onClick: onClick, pathname: pathname })) : (react_1.default.createElement(MenuCTA_1.default, { icon: item.icon, id: item.id, isActive: MenuUtils_1.default(pathname, item.url), isMobile: true, label: item.label, onClick: onClick, url: item.url })))); })
                : null)),
        react_1.default.createElement("nav", { className: "menu-mobile-content-nav" },
            react_1.default.createElement("ul", null, Array.isArray(secondary)
                ? secondary.map(function (item) { return (react_1.default.createElement("li", { key: "menu-mobile-content-item-secondary-" + item.id },
                    react_1.default.createElement(MenuCTA_1.default, { icon: item.icon, id: item.id, isLink: true, label: item.label, onClick: onClick, target: item.target, url: item.url }))); })
                : null)),
        firstName ? (react_1.default.createElement("nav", { className: "menu-mobile-content-nav" },
            react_1.default.createElement("ul", null,
                react_1.default.createElement("li", null,
                    react_1.default.createElement(MenuCTA_1.default, { icon: "profile", id: "profile", isLink: true, label: "Hi, " + firstName, onClick: onClick, url: profileUrl })),
                react_1.default.createElement("li", null,
                    react_1.default.createElement(MenuCTA_1.default, { icon: "sign-out", id: "sign-out", isLink: true, label: "Sign Out", onClick: onClick, url: signOutUrl }))))) : null));
};
var StyledMenuMobileContent = styled_components_1.default(MenuMobileContent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  padding-bottom: 100px;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  overflow: auto;\n\n  @media (min-width: 480px) {\n    width: ", ";\n  }\n\n  /**\n   * Menu Mobile Header\n   */\n  .menu-mobile-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n\n    > button {\n      border-width: 0;\n      border-style: none;\n      padding: 1rem;\n\n      background-color: transparent;\n\n      font-size: 1.5rem;\n      color: #666;\n\n      cursor: pointer;\n      outline: 0;\n    }\n  }\n\n  /**\n   * Menu Mobile Content Nav\n   */\n  .menu-mobile-content-nav {\n    border-top: 1px solid #e0e0e0;\n    border-bottom: 1px solid #e0e0e0;\n    margin-bottom: 24px;\n\n    background-color: white;\n\n    > ul {\n      margin: 0;\n      padding-left: 0;\n      list-style-type: none;\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  padding-bottom: 100px;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  overflow: auto;\n\n  @media (min-width: 480px) {\n    width: ", ";\n  }\n\n  /**\n   * Menu Mobile Header\n   */\n  .menu-mobile-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n\n    > button {\n      border-width: 0;\n      border-style: none;\n      padding: 1rem;\n\n      background-color: transparent;\n\n      font-size: 1.5rem;\n      color: #666;\n\n      cursor: pointer;\n      outline: 0;\n    }\n  }\n\n  /**\n   * Menu Mobile Content Nav\n   */\n  .menu-mobile-content-nav {\n    border-top: 1px solid #e0e0e0;\n    border-bottom: 1px solid #e0e0e0;\n    margin-bottom: 24px;\n\n    background-color: white;\n\n    > ul {\n      margin: 0;\n      padding-left: 0;\n      list-style-type: none;\n    }\n  }\n"])), function () { return Menu_1.width; });
StyledMenuMobileContent.defaultProps = {
    className: '',
};
exports.default = StyledMenuMobileContent;
var templateObject_1;