folding-side-menu
Version:
Side menu that expand on mouse over.
99 lines • 4.37 kB
JavaScript
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);
};
import React from 'react';
import clsx from 'clsx';
import { createStyles, Link, Drawer, List, ListItem, ListItemIcon, ListItemText, makeStyles, } from '@material-ui/core/';
var drawerWidth = 240;
var useStyles = makeStyles(function (theme) {
var _a;
return createStyles({
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
},
drawerOpenImported: function (props) { return (__assign({}, props.openMenuCSS)); },
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerCloseImported: function (props) { return (__assign({ overflowX: 'hidden' }, props.closeMenuCSS)); },
drawerClose: (_a = {},
_a[theme.breakpoints.up('sm')] = {
width: theme.spacing(9) + 1,
},
_a),
drawerHeader: {
display: 'flex',
alignItems: 'center',
paddingTop: '7em',
justifyContent: 'center',
},
toolbar: function (props) { return ({
minHeight: props.topMarginItems !== undefined
? props.topMarginItems
: theme.mixins.toolbar.minHeight,
}); },
linkText: function (props) { return (__assign({ color: 'inherit', textDecoration: 'none' }, props.menuItemCSS)); },
});
});
var SideMenu = function (_a) {
var _b, _c;
var openMenuCSS = _a.openMenuCSS, closeMenuCSS = _a.closeMenuCSS, menuItemCSS = _a.menuItemCSS, topMarginItems = _a.topMarginItems, menuItems = _a.menuItems;
var classes = useStyles({
openMenuCSS: openMenuCSS,
closeMenuCSS: closeMenuCSS,
menuItemCSS: menuItemCSS,
topMarginItems: topMarginItems,
});
var _d = React.useState(false), sideBarOpen = _d[0], setSidebarOpen = _d[1];
var HandleSideBarOnMouseEnter = function () {
setSidebarOpen(true);
};
var HandleSideBarOnMouseLeave = function () {
setSidebarOpen(false);
};
var drawerClose = classes.drawerClose + " " + classes.drawerCloseImported;
var drawerOpen = classes.drawerOpen + " " + classes.drawerOpenImported;
return (React.createElement(Drawer, { "data-testid": "menuContainer", variant: "permanent", className: clsx(classes.drawer, (_b = {},
_b[drawerOpen] = sideBarOpen,
_b[drawerClose] = !sideBarOpen,
_b)), classes: {
paper: clsx((_c = {},
_c[drawerOpen] = sideBarOpen,
_c[drawerClose] = !sideBarOpen,
_c)),
}, onMouseEnter: HandleSideBarOnMouseEnter, onMouseLeave: HandleSideBarOnMouseLeave },
React.createElement("div", { id: "Prueba", className: classes.toolbar }),
React.createElement(List, { "data-testid": "list" }, menuItems.map(function (menuItem) {
var innerContent = (React.createElement(ListItem, { button: true },
React.createElement(ListItemIcon, null, menuItem.icon),
React.createElement(ListItemText, { primary: menuItem.text })));
if (menuItem.rootingElement) {
return (React.createElement("li", { key: "menmu-item-" + menuItem.text },
React.createElement(menuItem.rootingElement, null, innerContent)));
}
return (React.createElement("li", { key: "menmu-item-" + menuItem.text },
React.createElement(Link, { href: menuItem.path, className: classes.linkText }, innerContent)));
}))));
};
SideMenu.defaultProps = {
openMenuCSS: {},
closeMenuCSS: {},
menuItemCSS: {},
topMarginItems: undefined,
};
export default SideMenu;
//# sourceMappingURL=SideMenu.js.map