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>

  )

}