playtpus_ui/lib/src/components/sidebar/index.js

React Component Libary

"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 __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var styled_components_1 = __importStar(require("styled-components"));
var __1 = require("../../");
var config_1 = require("../../config");
var Sidebar = function (_a) {
    var _b = _a.active, active = _b === void 0 ? "" : _b, _c = _a.routes, routes = _c === void 0 ? [] : _c, avatar = _a.avatar, role = _a.role, name = _a.name, Router = _a.Router;
    var _d = react_1.useState(true), collapsed = _d[0], setCollapsed = _d[1];
    var location = active;
    var makeStr = function (bool) { return String(bool); };
    var activeStyle = {
        borderLeft: ".3em solid " + config_1.primaryColor,
        color: config_1.primaryColor,
    };
    var events = {
        onMouseEnter: function () { return setCollapsed(false); },
        onMouseLeave: function () { return setCollapsed(true); },
    };
    var collapsedHidden = collapsed ? "hide" : "";
    return (react_1.default.createElement("div", __assign({}, events),
        react_1.default.createElement(LeftNav, { background: "", collapsed: collapsed },
            avatar && (react_1.default.createElement(__1.Grid.Item, { hideOnMobile: true },
                react_1.default.createElement(__1.Avatar, { medium: !collapsed, src: avatar }))),
            name && (react_1.default.createElement(__1.Grid.Item, { hideOnMobile: true, className: "txt-md txt-center grid " + collapsedHidden },
                react_1.default.createElement("div", { className: "capitalize" },
                    " ",
                    name))),
            role && (react_1.default.createElement(__1.Grid.Item, { hideOnMobile: true, className: "txt-md txt-center grid " + collapsedHidden },
                react_1.default.createElement(__1.Badge, { style: { fontSize: ".7em", padding: ".1em .4em", borderWidth: 2 }, inverted: true, className: "shadow capitalize " + collapsedHidden }, role))),
            routes.map(function (_a) {
                var to = _a.to, name = _a.name, icon = _a.icon;
                return (react_1.default.createElement(Router, { key: name, to: to[0] || "/" },
                    react_1.default.createElement(NavItem, { collapsed: collapsed, active: makeStr(to.reduce(function (acc, _) { return acc || false; }, false)), style: __assign({ gridTemplateColumns: collapsed ? "1fr" : "auto 1fr" }, (to.includes(location) ? activeStyle : {})) },
                        react_1.default.createElement("i", { style: { fontSize: "1.6em", padding: "0 .3em" }, className: icon }),
                        react_1.default.createElement("div", { className: "txt-center hide-mobile " + collapsedHidden }, name),
                        react_1.default.createElement("div", { style: { height: "2px" } }),
                        react_1.default.createElement("div", { style: { width: "100%", height: "2px" } },
                            react_1.default.createElement(Line, null)))));
            }))));
};
var Line = styled_components_1.default.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: scaleX(0);\n"], ["\n  transform: scaleX(0);\n"])));
var border = styled_components_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["from { transform: scaleX(0); } to { transform: scaleX(1);}"], ["from { transform: scaleX(0); } to { transform: scaleX(1);}"])));
var NavItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: grid;\n  text-decoration: none;\n  place-items: center;\n  color: ", ";\n  font-size: 1.35em;\n  cursor: pointer;\n  padding: 0.8em 0.4em;\n\n  @media (max-width: ", ") {\n    border-left: 0 !important;\n    grid-template-columns: 1fr;\n    padding-left: 0.3em;\n  }\n\n  &:hover ", " {\n    color: ", ";\n    animation: ", " 300ms ease-out;\n    transform: scaleX(1);\n  }\n"], ["\n  display: grid;\n  text-decoration: none;\n  place-items: center;\n  color: ", ";\n  font-size: 1.35em;\n  cursor: pointer;\n  padding: 0.8em 0.4em;\n\n  @media (max-width: ", ") {\n    border-left: 0 !important;\n    grid-template-columns: 1fr;\n    padding-left: 0.3em;\n  }\n\n  &:hover ", " {\n    color: ", ";\n    animation: ", " 300ms ease-out;\n    transform: scaleX(1);\n  }\n"])), config_1.primaryTxtColor, config_1.mobileWidth, Line, config_1.primaryColor, border);
var LeftNav = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  font-size: 0.8em;\n  display: grid;\n  padding: 0.3em;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  color: ", ";\n  ", "\n  grid-template-rows: repeat(16, auto);\n  align-items: center;\n  justify-items: stretch;\n  transition: 100ms ease-out;\n  background-color: white;\n  background-image: url(", ");\n  background-attachment: fixed;\n  @media (max-width: ", ") {\n    height: 55px;\n    width: 100vw;\n    top: inherit;\n    bottom: 0;\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n    grid-template-rows: 1fr;\n  }\n"], ["\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  font-size: 0.8em;\n  display: grid;\n  padding: 0.3em;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  color: ", ";\n  ", "\n  grid-template-rows: repeat(16, auto);\n  align-items: center;\n  justify-items: stretch;\n  transition: 100ms ease-out;\n  background-color: white;\n  background-image: url(", ");\n  background-attachment: fixed;\n  @media (max-width: ", ") {\n    height: 55px;\n    width: 100vw;\n    top: inherit;\n    bottom: 0;\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n    grid-template-rows: 1fr;\n  }\n"])), config_1.primaryColor, function (_a) {
    var collapsed = _a.collapsed;
    return "width: " + (collapsed ? "6em" : "17em") + ";";
}, function (props) { return props.background; }, config_1.mobileWidth);
exports.default = Sidebar;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=index.js.map