Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { NavLink as Link, useRouteMatch } from 'react-router-dom'
import {
  Collapse,
  List,
  ListItemButton,
  ListItemText,
  styled
} from '@mui/material'
import { ExpandLess, ExpandMore } from '@mui/icons-material'

import Widget from '@app/components/UI/Widget'

const Navigation = styled(Widget)(({ theme }) => ({
  [theme.breakpoints.down('md')]: {
    '& > ul': {
      display: 'flex',
      '& > a': {
        borderRight: '1px solid var(--border-primary)'
      }
    }
  }
}))

export default function HabitsMenu() {
  const { url } = useRouteMatch()
  const [open, setOpen] = useState(false)

  const handleClick = () => setOpen(!open)

  return (
    <>
      <Navigation>
        <List
          sx={{
            '& .MuiListItemButton-root.active .MuiTypography-body1': {
              fontWeight: '600'
            }
          }}
        >
          <ListItemButton LinkComponent={Link} to={url} exact>
            <ListItemText primary='Habitos' />
          </ListItemButton>

          <ListItemButton LinkComponent={Link} to={`${url}/goals`} exact>
            <ListItemText primary='Metas' />
          </ListItemButton>

          <ListItemButton onClick={handleClick}>
            <ListItemText primary='Propósitos' />
            {open ? <ExpandLess /> : <ExpandMore />}
          </ListItemButton>

          <Collapse in={open} timeout='auto' unmountOnExit>
            <List disablePadding>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to={`${url}/purposes`}
              >
                <ListItemText primary='Propósito' />
              </ListItemButton>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to={`${url}/paradigms`}
              >
                <ListItemText primary='Paradigmas' />
              </ListItemButton>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to={`${url}/values`}
              >
                <ListItemText primary='Valores' />
              </ListItemButton>
            </List>
          </Collapse>
        </List>
      </Navigation>
    </>
  )
}