Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { NavLink as Link } 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 [open, setOpen] = useState(false)

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

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

          <ListItemButton LinkComponent={Link} to='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='purposes'>
                <ListItemText primary='Propósito' />
              </ListItemButton>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to='paradigms'
              >
                <ListItemText primary='Paradigmas' />
              </ListItemButton>
              <ListItemButton sx={{ pl: 4 }} LinkComponent={Link} to='values'>
                <ListItemText primary='Valores' />
              </ListItemButton>
            </List>
          </Collapse>
        </List>
      </Navigation>
    </>
  )
}