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%' }}>

                    <AccordionSummary

                        expandIcon={<ExpandMoreIcon />}

                        aria-controls="panel1a-content"

                        id="panel1a-header"

                        sx={{ minHeight: 'auto' }}

                    >

                        <Typography margin='1rem 0'>{title}</Typography>

                    </AccordionSummary>

                    <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