Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

function MenuDrawer({ isOpen = false, items = [], icons = [], closeDrawer = () => { } }) {

    return (
        <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
            <Box sx={{ width: 250, padding: '1rem' }} role="presentation">
                <List>
                    {items.map((navItem, index) => {
                        return (
                            <MenuDrawer.Item
                                key={index}
                                Icon={icons[index]}
                                title={navItem.label}
                                url={navItem.href}
                                childs={navItem.childs}
                            />
                        )
                    })}
                </List>
            </Box>

        </Drawer>
    )
}

const Item = ({ Icon, title, url, childs = [] }) => {
    return (
        <ListItem disablePadding>
            {!childs.length
                ?
                <Link href={url} display='flex' gap='.5rem'>
                    <ListItemIcon>
                        {Icon && <Icon />}
                    </ListItemIcon>
                    <ListItemText primary={title} />
                </Link>
                :
                <Accordion sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        sx={{ minHeight: 'auto !importante', margin: '0' }}
                        LinkComponent={
                            <Link href={url} display='flex' gap='.5rem'>
                                <ListItemIcon>
                                    {Icon && <Icon />}
                                </ListItemIcon>
                                <ListItemText primary={title} />
                            </Link>
                        }
                    />
                    <AccordionDetails>
                        {childs.map((child, index) => {
                            return (
                                <Link key={index} href={child.href}>
                                    <ListItemText primary={child.label} />
                                </Link>
                            )
                        })}
                    </AccordionDetails>
                </Accordion>
            }

        </ListItem>
    )
}

MenuDrawer.Item = Item

export default MenuDrawer