Material-ui响应式抽屉单击列表项并仅在移动抽屉上切换(关闭)抽屉

import { Drawer, List, ListItem, ListItemText } from '@mui/material';
import { useState } from 'react';

function MyDrawer() {
  const [open, setOpen] = useState(false);

  const handleToggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <>
      <button onClick={handleToggleDrawer}>Toggle Drawer</button>
      <Drawer anchor="left" open={open} onClose={handleToggleDrawer}>
        <List>
          <ListItem button onClick={handleToggleDrawer}>
            <ListItemText primary="Menu Item 1" />
          </ListItem>
          <ListItem button onClick={handleToggleDrawer}>
            <ListItemText primary="Menu Item 2" />
          </ListItem>
          {/* Add more menu items as needed */}
        </List>
      </Drawer>
    </>
  );
}

npm install react-responsive

import { useMediaQuery } from 'react-responsive';

function MyComponent() {
  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <>
      {isMobile ? (
        <MyDrawer />
      ) : (
        {/* Render your non-mobile layout here */}
      )}
    </>
  );
}