Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Link as NavLink, useNavigate } from 'react-router-dom'
import {
  Box,
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography,
  Link
} from '@mui/material'
import { ExpandMore } from '@mui/icons-material'

import { axios } from '@app/utils'

function MenuDrawer({
  isOpen = false,
  items = [],
  icons = [],
  closeDrawer = () => {}
}) {
  return (
    <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
      <Box sx={{ width: 250 }} role='presentation'>
        <List>
          {items.map((item, index) => {
            const icon = icons[index]
            const menuItem = { ...item, icon }

            return (
              <ListItem key={index} sx={{ padding: '8px 16px !important' }}>
                {item.childs?.length ? (
                  <AccordionItem
                    key={index}
                    item={menuItem}
                    close={closeDrawer}
                  />
                ) : (
                  <MenuDrawerItem item={menuItem} close={closeDrawer} />
                )}
              </ListItem>
            )
          })}
        </List>
      </Box>
    </Drawer>
  )
}

const MenuDrawerItem = ({ item, close }) => {
  const navigate = useNavigate()

  const { label, href, ajax, icon: Icon } = item

  const navigateTo = async (url) => {
    const { data } = await axios.get(url)
    if (data.success) {
      navigate(data.data)
    }
  }

  return (
    <Link
      component={NavLink}
      to={`/${href}`}
      onClick={() => (ajax ? navigateTo(href) : close())}
      sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
    >
      {Icon ? (
        <ListItemIcon sx={{ minWidth: 'auto' }}>
          <Icon />
        </ListItemIcon>
      ) : null}
      <ListItemText primary={label} />
    </Link>
  )
}

const AccordionItem = ({ item, close }) => {
  const { label, childs, icon: Icon } = item

  return (
    <Accordion
      sx={{
        border: 'none',
        width: '100%',
        boxShadow: 'none',
        padding: 0,
        '&::before': {
          display: 'none'
        }
      }}
    >
      <AccordionSummary
        sx={{ padding: '0.5rem 0 !important' }}
        expandIcon={<ExpandMore />}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          {Icon && <Icon />}
          <Typography margin='0'>{label}</Typography>
        </Box>
      </AccordionSummary>

      <AccordionDetails sx={{ padding: 0 }}>
        {childs.map((child, index) => {
          if (child.childs?.length) {
            return <AccordionItem key={index} item={child} close={close} />
          }

          return <MenuDrawerItem key={index} item={child} close={close} />
        })}
      </AccordionDetails>
    </Accordion>
  )
}

export default MenuDrawer