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'
import AccountTreeRoundedIcon from '@mui/icons-material/AccountTreeRounded';

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

    return (
        <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
            <Box sx={{ width: 250 }} 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' paddingLeft='1rem'>
                    <ListItemIcon>
                        {Icon && <Icon />}
                    </ListItemIcon>
                    <ListItemText primary={title} />
                </Link>
                :
                <Accordion sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        sx={{ minHeight: 'auto !important', margin: '0', padding: 0, paddingLeft: '1rem' }}
                    >
                        {Icon && <Icon />}
                        <Typography margin='0'>{title}</Typography>
                    </AccordionSummary>
                    <AccordionDetails sx={{ padding: 0 }}>
                        {childs.map((child, index) => {
                            if (child.childs?.length) {
                                return (
                                    <Accordion key={index} sx={{ border: 'none', width: '100%', boxShadow: 'none', background: 'lightgray' }}>
                                        <AccordionSummary
                                            expandIcon={<ExpandMoreIcon />}
                                            sx={{ minHeight: 'auto !important', margin: '0' }}
                                        >
                                            <AccountTreeRoundedIcon />
                                            <Typography margin='0'>{child.label}</Typography>
                                        </AccordionSummary>
                                        <AccordionDetails sx={{ padding: '0 16px' }}>
                                            {child.childs.map((levelThree, index) => {
                                                return (
                                                    <Link key={index} href={`/${levelThree.href}`} >
                                                        <ListItemText primary={levelThree.label} />
                                                    </Link>
                                                )
                                            })}
                                        </AccordionDetails>
                                    </Accordion>
                                )
                            }
                            return (
                                <Link key={index} href={child.href[0] === '/' ? child.href : `/${child.href}`}>
                                    <ListItemText primary={child.label} sx={{ padding: '0 16px' }} />
                                </Link>
                            )
                        })}
                    </AccordionDetails>
                </Accordion>
            }

        </ListItem>
    )
}

MenuDrawer.Item = Item

export default MenuDrawer