Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5010 | Rev 6248 | 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'
4959 stevensc 15 
import AccountTreeRoundedIcon from '@mui/icons-material/AccountTreeRounded';
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 />}
4959 stevensc 56 
                        sx={{ minHeight: 'auto !important', margin: '0', padding: 0, paddingLeft: '1rem' }}
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 (
4960 stevensc 65 
                                    <Accordion key={index} sx={{ border: 'none', width: '100%', boxShadow: 'none', background: 'lightgray' }}>
4788 stevensc 66 
                                        <AccordionSummary
67 
                                            expandIcon={<ExpandMoreIcon />}
4960 stevensc 68 
                                            sx={{ minHeight: 'auto !important', margin: '0' }}
4788 stevensc 69 
                                        >
4959 stevensc 70 
                                            <AccountTreeRoundedIcon />
4789 stevensc 71 
                                            <Typography margin='0'>{child.label}</Typography>
4788 stevensc 72 
                                        </AccordionSummary>
4960 stevensc 73 
                                        <AccordionDetails sx={{ padding: '0 16px' }}>
4788 stevensc 74 
                                            {child.childs.map((levelThree, index) => {
75 
                                                return (
5010 stevensc 76 
                                                    <Link key={index} href={`/${levelThree.href}`} >
4788 stevensc 77 
                                                        <ListItemText primary={levelThree.label} />
78 
                                                    </Link>
79 
                                                )
80 
                                            })}
81 
                                        </AccordionDetails>
82 
                                    </Accordion>
83 
                                )
84 
                            }
4779 stevensc 85 
                            return (
5012 stevensc 86 
                                <Link key={index} href={child.href[0] === '/' ? child.href : `/${child.href}`}>
87 
                                    <ListItemText primary={child.label} sx={{ padding: '0 16px' }} />
4779 stevensc 88 
                                </Link>
89 
                            )
90 
                        })}
91 
                    </AccordionDetails>
92 
                </Accordion>
93 
            }
94 
 
95 
        </ListItem>
96 
    )
97 
}
98 
 
99 
MenuDrawer.Item = Item
100 
 
101 
export default MenuDrawer