1  import { Box, styled, useMediaQuery, useTheme } from "@mui/material";
 2  
 3  const SideNav = styled("div")(({ theme, width }) => ({
 4    zIndex: 91,
 5    width: width,
 6    overflow: "hidden",
 7    position: "relative",
 8    transition: "width 250ms ease",
 9    background: theme.palette.background.default,
10    [theme.breakpoints.down("sm")]: {
11      top: 0,
12      left: 0,
13      bottom: 0,
14      position: "absolute"
15    }
16  }));
17  
18  const SideNavOverlay = styled("div")(() => ({
19    zIndex: 90,
20    width: "100%",
21    height: "100%",
22    position: "absolute",
23    background: "rgba(0, 0, 0, 0.74)"
24  }));
25  
26  export default function MatxSidenav({ sx, open, children, toggleSidenav, width = "220px" }) {
27    const theme = useTheme();
28    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
29  
30    return (
31      <Box height="100%" display="flex">
32        <SideNav sx={sx} width={open || !isMobile ? width : "0px"}>
33          {children}
34        </SideNav>
35  
36        {open && isMobile && <SideNavOverlay onClick={toggleSidenav} />}
37      </Box>
38    );
39  }