Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4957 | Rev 4959 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4779 stevensc 1 
/* eslint-disable react/prop-types */
4953 stevensc 2 
import * as React from 'react'
3 
import Box from '@mui/material/Box'
4 
import Drawer from '@mui/material/Drawer'
5 
import List from '@mui/material/List'
6 
import ListItem from '@mui/material/ListItem'
7 
import ListItemIcon from '@mui/material/ListItemIcon'
8 
import ListItemText from '@mui/material/ListItemText'
9 
import Accordion from '@mui/material/Accordion'
10 
import AccordionSummary from '@mui/material/AccordionSummary'
11 
import AccordionDetails from '@mui/material/AccordionDetails'
12 
import Link from '@mui/material/Link'
13 
import Typography from '@mui/material/Typography'
14 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
15 
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
4779 stevensc 16 
 
4780 stevensc 17 
function MenuDrawer({ isOpen = false, items = [], icons = [], closeDrawer = () => { } }) {
4779 stevensc 18 
 
19 
    return (
4780 stevensc 20 
        <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
4956 stevensc 21 
            <Box sx={{ width: 250 }} role="presentation">
4779 stevensc 22 
                <List>
23 
                    {items.map((navItem, index) => {
24 
                        return (
25 
                            <MenuDrawer.Item
26 
                                key={index}
27 
                                Icon={icons[index]}
28 
                                title={navItem.label}
29 
                                url={navItem.href}
30 
                                childs={navItem.childs}
31 
                            />
32 
                        )
33 
                    })}
34 
                </List>
35 
            </Box>
36 
 
37 
        </Drawer>
38 
    )
39 
}
40 
 
41 
const Item = ({ Icon, title, url, childs = [] }) => {
42 
    return (
4957 stevensc 43 
        <ListItem disablePadding>
4779 stevensc 44 
            {!childs.length
45 
                ?
4957 stevensc 46 
                <Link href={`/${url}`} display='flex' gap='.5rem' paddingLeft='1rem'>
4779 stevensc 47 
                    <ListItemIcon>
48 
                        {Icon && <Icon />}
49 
                    </ListItemIcon>
50 
                    <ListItemText primary={title} />
51 
                </Link>
52 
                :
4781 stevensc 53 
                <Accordion sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
4779 stevensc 54 
                    <AccordionSummary
55 
                        expandIcon={<ExpandMoreIcon />}
4958 stevensc 56 
                        sx={{ minHeight: 'auto !important', margin: '0', padding: 0, paddingLeft: '1rem', background: 'lightgray' }}
4784 stevensc 57 
                    >
58 
                        {Icon && <Icon />}
4787 stevensc 59 
                        <Typography margin='0'>{title}</Typography>
4784 stevensc 60 
                    </AccordionSummary>
4788 stevensc 61 
                    <AccordionDetails sx={{ padding: 0 }}>
4779 stevensc 62 
                        {childs.map((child, index) => {
4788 stevensc 63 
                            if (child.childs?.length) {
64 
                                return (
65 
                                    <Accordion key={index} sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
66 
                                        <AccordionSummary
67 
                                            expandIcon={<ExpandMoreIcon />}
4903 stevensc 68 
                                            sx={{ minHeight: 'auto !important', margin: '0' }}
4788 stevensc 69 
                                        >
4789 stevensc 70 
                                            <Typography margin='0'>{child.label}</Typography>
4788 stevensc 71 
                                        </AccordionSummary>
4955 stevensc 72 
                                        <AccordionDetails sx={{ padding: '0 16px', background: 'lightgray' }}>
4788 stevensc 73 
                                            {child.childs.map((levelThree, index) => {
74 
                                                return (
4903 stevensc 75 
                                                    <Link key={index} href={`/${levelThree.href}`}>
4788 stevensc 76 
                                                        <ListItemText primary={levelThree.label} />
77 
                                                    </Link>
78 
                                                )
79 
                                            })}
80 
                                        </AccordionDetails>
81 
                                    </Accordion>
82 
                                )
83 
                            }
4779 stevensc 84 
                            return (
4903 stevensc 85 
                                <Link key={index} href={`${child.href}`}>
4779 stevensc 86 
                                    <ListItemText primary={child.label} />
87 
                                </Link>
88 
                            )
89 
                        })}
90 
                    </AccordionDetails>
91 
                </Accordion>
92 
            }
93 
 
94 
        </ListItem>
95 
    )
96 
}
97 
 
98 
MenuDrawer.Item = Item
99 
 
100 
export default MenuDrawer