@etsoo/materialui
Version:
TypeScript Material-UI Implementation
45 lines (44 loc) • 2.8 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LeftDrawer = LeftDrawer;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
const DrawerHeader_1 = require("./DrawerHeader");
const ReactApp_1 = require("../app/ReactApp");
const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const Divider_1 = __importDefault(require("@mui/material/Divider"));
const List_1 = __importDefault(require("@mui/material/List"));
function LeftDrawer(props) {
// Global app
const app = (0, ReactApp_1.useAppContext)();
// Destruct
const { mdUp, width, appName = app?.get("appName"), logoUrl = "/logo192.png", onMinimize, open = mdUp, children } = props;
// Menu open/close state
const [openLocal, setOpen] = react_1.default.useState();
const handleDrawerClose = () => {
if (onMinimize)
onMinimize();
setOpen(false);
};
// Ready
react_1.default.useEffect(() => {
setOpen(open);
}, [open]);
return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { hidden: !openLocal, sx: {
width,
flexShrink: 0,
"& .MuiDrawer-paper": {
width,
boxSizing: "border-box"
}
}, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, transitionDuration: 0, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
keepMounted: true // Better open performance on mobile.
}, children: [(0, jsx_runtime_1.jsxs)(DrawerHeader_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)("a", { href: "https://www.etsoo.com", title: app?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), (0, jsx_runtime_1.jsx)(Typography_1.default, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: handleDrawerClose, children: (0, jsx_runtime_1.jsx)(ChevronLeft_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(List_1.default, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
}