Just a css grid that slides in

import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { Card, Grid, Typography } from '@mui/material';
import { red } from '@mui/material/colors';

const icon = (
  <Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(4, 1fr)',
  //  gridTemplateRows: 'repeat(2, 50px)',
    gap: 0.02,
  }}
>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  </Box>
);

export default function SimpleSlide() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 180 }}>
      <Box sx={{ width: `calc(100px + 16px)` }}>
        <Button
        onClick={handleChange}
          label="Show"
        > click me </Button>
        <Slide direction="right" in={checked} mountOnEnter unmountOnExit>
          {icon}
        </Slide>
      </Box>
    </Box>
  );
}