1  import { Drawer } from '@mui/material';
 2  import { ReactNode } from 'react';
 3  
 4  interface DrawerWrapperProps {
 5    open: boolean;
 6    setOpen: (value: boolean) => void;
 7    headerHeight: number;
 8    children: ReactNode;
 9  }
10  
11  export const DrawerWrapper = ({ open, setOpen, children, headerHeight }: DrawerWrapperProps) => {
12    return (
13      <Drawer
14        data-cy={`mobile-menu`}
15        anchor="top"
16        open={open}
17        onClose={() => setOpen(false)}
18        hideBackdrop
19        sx={{ top: `${headerHeight}px` }}
20        PaperProps={{
21          sx: {
22            background: 'rgba(27, 32, 48, 0.98)',
23            backdropFilter: 'blur(20px)',
24            boxShadow: 'none',
25            borderRadius: 'unset',
26            width: '100%',
27            top: `${headerHeight}px`,
28            pt: 6,
29            pb: 15,
30            minHeight: '100vh',
31          },
32        }}
33      >
34        {children}
35      </Drawer>
36    );
37  };