Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4789 | Rev 4903 | 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 */
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 
 
4780 stevensc 16 
function MenuDrawer({ isOpen = false, items = [], icons = [], closeDrawer = () => { } }) {
4779 stevensc 17 
 
18 
    return (
4780 stevensc 19 
        <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
20 
            <Box sx={{ width: 250, padding: '1rem' }} role="presentation">
4779 stevensc 21 
                <List>
22 
                    {items.map((navItem, index) => {
23 
                        return (
24 
                            <MenuDrawer.Item
25 
                                key={index}
26 
                                Icon={icons[index]}
27 
                                title={navItem.label}
28 
                                url={navItem.href}
29 
                                childs={navItem.childs}
30 
                            />
31 
                        )
32 
                    })}
33 
                </List>
34 
            </Box>
35 
 
36 
        </Drawer>
37 
    )
38 
}
39 
 
40 
const Item = ({ Icon, title, url, childs = [] }) => {
41 
    return (
42 
        <ListItem disablePadding>
43 
            {!childs.length
44 
                ?
4780 stevensc 45 
                <Link href={url} display='flex' gap='.5rem'>
4779 stevensc 46 
                    <ListItemIcon>
47 
                        {Icon && <Icon />}
48 
                    </ListItemIcon>
49 
                    <ListItemText primary={title} />
50 
                </Link>
51 
                :
4781 stevensc 52 
                <Accordion sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
4779 stevensc 53 
                    <AccordionSummary
54 
                        expandIcon={<ExpandMoreIcon />}
4787 stevensc 55 
                        sx={{ minHeight: 'auto !important', margin: '0', padding: 0 }}
4784 stevensc 56 
                    >
57 
                        {Icon && <Icon />}
4787 stevensc 58 
                        <Typography margin='0'>{title}</Typography>
4784 stevensc 59 
                    </AccordionSummary>
4788 stevensc 60 
                    <AccordionDetails sx={{ padding: 0 }}>
4779 stevensc 61 
                        {childs.map((child, index) => {
4788 stevensc 62 
                            if (child.childs?.length) {
63 
                                return (
64 
                                    <Accordion key={index} sx={{ border: 'none', width: '100%', boxShadow: 'none' }}>
65 
                                        <AccordionSummary
66 
                                            expandIcon={<ExpandMoreIcon />}
4790 stevensc 67 
                                            sx={{ minHeight: 'auto !important', margin: '0'}}
4788 stevensc 68 
                                        >
4789 stevensc 69 
                                            <Typography margin='0'>{child.label}</Typography>
4788 stevensc 70 
                                        </AccordionSummary>
71 
                                        <AccordionDetails sx={{ padding: 0 }}>
72 
                                            {child.childs.map((levelThree, index) => {
73 
                                                return (
74 
                                                    <Link key={index} href={levelThree.href}>
75 
                                                        <ListItemText primary={levelThree.label} />
76 
                                                    </Link>
77 
                                                )
78 
                                            })}
79 
                                        </AccordionDetails>
80 
                                    </Accordion>
81 
                                )
82 
                            }
4779 stevensc 83 
                            return (
84 
                                <Link key={index} href={child.href}>
85 
                                    <ListItemText primary={child.label} />
86 
                                </Link>
87 
                            )
88 
                        })}
89 
                    </AccordionDetails>
90 
                </Accordion>
91 
            }
92 
 
93 
        </ListItem>
94 
    )
95 
}
96 
 
97 
MenuDrawer.Item = Item
98 
 
99 
export default MenuDrawer