myprojectpackageprav
Version:
My package in npm
66 lines • 3.01 kB
JavaScript
import { NavLink, Link } from 'react-router-dom/cjs/react-router-dom';
import Logo from '../../assets/images/logo.svg';
import './menus.css';
import { useState, useEffect } from 'react';
export default function Menus(_a) {
var children = _a.children;
var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
var toggle = function () { return setIsOpen(!isOpen); };
var _c = useState(getWindowSize()), windowSize = _c[0], setWindowSize = _c[1];
useEffect(function () {
if (windowSize.innerWidth > 1023) {
setIsOpen(true);
}
else {
setIsOpen(false);
}
}, [windowSize]);
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(Link, { className: "p-0", title: "Rhybus", to: "/" },
React.createElement("img", { src: Logo, 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(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)))));
}
//# sourceMappingURL=menus.js.map