Drawer

 import * as React from "react";

import Box from "@mui/material/Box";

import Drawer from "@mui/material/Drawer";

import Button from "@mui/material/Button";

import List from "@mui/material/List";

import Divider from "@mui/material/Divider";

import ListItem from "@mui/material/ListItem";

import ListItemButton from "@mui/material/ListItemButton";

import ListItemIcon from "@mui/material/ListItemIcon";

import ListItemText from "@mui/material/ListItemText";

export default function AnchorTemporaryDrawer() {

  const [state, setState] = React.useState({

    top: false,

  });

  const toggleDrawer = (anchor, open) => (event) => {

    if (

      event.type === "keydown" &&

      (event.key === "Tab" || event.key === "Shift")

    ) {

      return;

    }

    setState({ ...state, [anchor]: open });

  };

  const list = (anchor) => (

    <Box

      sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : 250 }}

      role="presentation"

      onClick={toggleDrawer(anchor, false)}

      onKeyDown={toggleDrawer(anchor, false)}

    >

      <div style={{ display: "flex", marginTop: "50px" }}>

        <div>

          <List>

            {["By Date", "By Name|Email|Mobile"].map((text, index) => (

              <ListItem key={text} disablePadding>

                <ListItemButton>

                  <ListItemIcon>

                    {/* {index % 2 === 0 ? <InboxIcon /> : <MailIcon />} */}

                  </ListItemIcon>

                  <ListItemText primary={text} />

                </ListItemButton>

              </ListItem>

            ))}

          </List>

        </div>

        <div>

          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque

          dolorem rem, adipisci mollitia quibusdam consectetur nobis atque

          maxime ullam ab!

        </div>

      </div>

    </Box>

  );

  return (

    <div>

      {["top"].map((anchor) => (

        <React.Fragment key={anchor}>

          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>

          <Drawer

            anchor={anchor}

            open={state[anchor]}

            onClose={toggleDrawer(anchor, false)}

          >

            {list(anchor)}

          </Drawer>

        </React.Fragment>

      ))}

    </div>

  );

}