index.tsx

import React from "react";
import {
  Box,
  Divider,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  Typography,
} from "@mui/material";
import { ICategory } from "components/interface";
import { useNavigate } from "react-router-dom";

type Props = {
  handleDrawerToggle: () => void;
  navItems: Array<ICategory>;
  mobileOpen: boolean;
};

const drawerWidth = 240;
const Sidenav = (props: Props) => {
  const navigate = useNavigate();
  const { navItems, handleDrawerToggle, mobileOpen } = props;

  return (
    <Box component="nav">
      <Drawer
        variant="temporary"
        open={mobileOpen}
        onClose={handleDrawerToggle}
        ModalProps={{
          keepMounted: true, // Better open performance on mobile.
        }}
        sx={{
          "& .MuiDrawer-paper": {
            boxSizing: "border-box",
            width: drawerWidth,
          },
        }}
      >
        <Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
          <Typography variant="h6" sx={{ my: 2 }}>
            Newspaper
          </Typography>
          <Divider />
          <List>
            {navItems.map((item) => (
              <ListItem
                key={item.link}
                disablePadding
                onClick={() => navigate(item.link)}
              >
                <ListItemButton sx={{ textAlign: "center" }}>
                  <ListItemText primary={item.label} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        </Box>
      </Drawer>
    </Box>
  );
};

export default Sidenav;