Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3692 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3201 stevensc 1 
import React from 'react'
2 
import { Link as NavLink, useNavigate } from 'react-router-dom'
3 
import {
4 
  Box,
5 
  Drawer,
6 
  List,
7 
  ListItem,
8 
  ListItemIcon,
9 
  ListItemText,
10 
  Accordion,
11 
  AccordionSummary,
12 
  AccordionDetails,
13 
  Typography,
14 
  Link
15 
} from '@mui/material'
16 
import { ExpandMore } from '@mui/icons-material'
17 
 
18 
import { axios } from '@app/utils'
19 
 
20 
function MenuDrawer({
21 
  isOpen = false,
22 
  items = [],
23 
  icons = [],
24 
  closeDrawer = () => {}
25 
}) {
26 
  return (
27 
    <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
28 
      <Box sx={{ width: 250 }} role='presentation'>
29 
        <List>
30 
          {items.map((item, index) => {
31 
            const icon = icons[index]
32 
            const menuItem = { ...item, icon }
33 
 
34 
            return (
35 
              <ListItem key={index} sx={{ padding: '8px 16px !important' }}>
36 
                {item.childs?.length ? (
37 
                  <AccordionItem
38 
                    key={index}
39 
                    item={menuItem}
40 
                    close={closeDrawer}
41 
                  />
42 
                ) : (
43 
                  <MenuDrawerItem item={menuItem} close={closeDrawer} />
44 
                )}
45 
              </ListItem>
46 
            )
47 
          })}
48 
        </List>
49 
      </Box>
50 
    </Drawer>
51 
  )
52 
}
53 
 
54 
const MenuDrawerItem = ({ item, close }) => {
55 
  const navigate = useNavigate()
56 
 
57 
  const { label, href, ajax, icon: Icon } = item
58 
 
59 
  const navigateTo = async (url) => {
60 
    const { data } = await axios.get(url)
61 
    if (data.success) {
62 
      navigate(data.data)
63 
    }
64 
  }
65 
 
66 
  return (
67 
    <Link
68 
      component={NavLink}
69 
      to={`/${href}`}
70 
      onClick={() => (ajax ? navigateTo(href) : close())}
71 
      sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
72 
    >
73 
      {Icon ? (
74 
        <ListItemIcon sx={{ minWidth: 'auto' }}>
75 
          <Icon />
76 
        </ListItemIcon>
77 
      ) : null}
78 
      <ListItemText primary={label} />
79 
    </Link>
80 
  )
81 
}
82 
 
83 
const AccordionItem = ({ item, close }) => {
84 
  const { label, childs, icon: Icon } = item
85 
 
86 
  return (
87 
    <Accordion
88 
      sx={{
89 
        border: 'none',
90 
        width: '100%',
91 
        boxShadow: 'none',
92 
        padding: 0,
93 
        '&::before': {
94 
          display: 'none'
95 
        }
96 
      }}
97 
    >
98 
      <AccordionSummary
99 
        sx={{ padding: '0.5rem 0 !important' }}
100 
        expandIcon={<ExpandMore />}
101 
      >
102 
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
103 
          {Icon && <Icon />}
104 
          <Typography margin='0'>{label}</Typography>
105 
        </Box>
106 
      </AccordionSummary>
107 
 
108 
      <AccordionDetails sx={{ padding: 0 }}>
109 
        {childs.map((child, index) => {
110 
          if (child.childs?.length) {
111 
            return <AccordionItem key={index} item={child} close={close} />
112 
          }
113 
 
114 
          return <MenuDrawerItem key={index} item={child} close={close} />
115 
        })}
116 
      </AccordionDetails>
117 
    </Accordion>
118 
  )
119 
}
120 
 
121 
export default MenuDrawer