@etsoo/materialui
Version:
TypeScript Material-UI Implementation
39 lines (38 loc) • 2.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import { DrawerHeader } from "./DrawerHeader";
import { useAppContext } from "../app/ReactApp";
import Drawer from "@mui/material/Drawer";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import Divider from "@mui/material/Divider";
import List from "@mui/material/List";
export function LeftDrawer(props) {
// Global app
const app = 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.useState();
const handleDrawerClose = () => {
if (onMinimize)
onMinimize();
setOpen(false);
};
// Ready
React.useEffect(() => {
setOpen(open);
}, [open]);
return (_jsxs(Drawer, { 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: [_jsxs(DrawerHeader, { children: [_jsx("a", { href: "https://www.etsoo.com", title: app?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: _jsx(Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), _jsx(Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), _jsx(IconButton, { size: "small", onClick: handleDrawerClose, children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(Divider, {}), _jsx(List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
}