Proyectos de Subversion LeadersLinked - SPA

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

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

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

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

  return (
    <Widget>
      <List>
        <ListItemButton LinkComponent={Link} to={url}>
          <ListItemText primary='Habitos' />
        </ListItemButton>

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

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

        <Collapse in={open} timeout='auto' unmountOnExit>
          <List disablePadding>
            <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>
            <ListItemButton
              sx={{ pl: 4 }}
              LinkComponent={Link}
              to={`${url}/purposes`}
            >
              <ListItemText primary='Propósito' />
            </ListItemButton>
          </List>
        </Collapse>
      </List>
    </Widget>
  )
}