myprojectpackageprav/dist/cjs/layouts/menus/menus.js

My package in npm

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_router_dom_1 = require("react-router-dom/cjs/react-router-dom");
var logo_svg_1 = tslib_1.__importDefault(require("../../assets/images/logo.svg"));
require("./menus.css");
var react_1 = require("react");
function Menus(_a) {
    var children = _a.children;
    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
    var toggle = function () { return setIsOpen(!isOpen); };
    var _c = (0, react_1.useState)(getWindowSize()), windowSize = _c[0], setWindowSize = _c[1];
    (0, react_1.useEffect)(function () {
        if (windowSize.innerWidth > 1023) {
            setIsOpen(true);
        }
        else {
            setIsOpen(false);
        }
    }, [windowSize]);
    (0, react_1.useEffect)(function () {
        function handleWindowResize() {
            setWindowSize(getWindowSize());
        }
        window.addEventListener("resize", handleWindowResize);
        return function () {
            window.removeEventListener("resize", handleWindowResize);
        };
    }, []);
    function getWindowSize() {
        var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
        return { innerWidth: innerWidth, innerHeight: innerHeight };
    }
    var menuitem = [
        {
            path: "/",
            name: "Home",
            icon: "icon-dashboard2"
        },
        {
            path: "/list-view",
            name: "List View",
            icon: "icon-requirements"
        },
        {
            path: "/form",
            name: "Form",
            icon: "icon-create"
        },
        {
            path: "/settings",
            name: "Settings",
            icon: "icon-settings"
        },
    ];
    return (React.createElement("div", { className: isOpen ? 'menus menuexpand' : 'menus menucollapsed' },
        React.createElement("div", { className: 'container' },
            React.createElement("div", { className: 'sidebar' },
                React.createElement("div", { className: 'sidebar-logo whitebg' },
                    React.createElement(react_router_dom_1.Link, { className: "p-0", title: "Rhybus", to: "/" },
                        React.createElement("img", { src: logo_svg_1.default, alt: 'Rhybus', tabIndex: 0, "aria-label": 'Rhybus', title: 'Rhybus', width: "200" }))),
                React.createElement("div", { tabIndex: 0, title: isOpen ? 'Collapse' : 'Expand', className: isOpen ? 'ms-auto maxfitcontent whitetext p-2 toggle-icon icon-expand1' : 'ms-auto maxfitcontent whitetext p-2 toggle-icon icon-collapsed', onClick: toggle }),
                React.createElement("ul", null, menuitem.map(function (item, index) { return (React.createElement("li", null,
                    React.createElement(react_router_dom_1.NavLink, { to: item.path, key: index, className: "link", title: item.name, activeclassName: "active", exact: true },
                        React.createElement("div", { className: item.icon }),
                        React.createElement("div", { className: 'menuitems' }, item.name)))); })),
                React.createElement("main", null, children)))));
}
exports.default = Menus;
//# sourceMappingURL=menus.js.map