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;