Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2618 | Rev 2622 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2482 stevensc 1 
import React, { useState } from 'react'
2620 stevensc 2 
import { NavLink as Link, useRouteMatch } from 'react-router-dom'
2580 stevensc 3 
import {
4 
  Collapse,
5 
  List,
6 
  ListItemButton,
7 
  ListItemText,
8 
  styled
9 
} from '@mui/material'
2602 stevensc 10 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
2482 stevensc 11 
 
12 
import Widget from '@app/components/UI/Widget'
13 
 
2602 stevensc 14 
const Navigation = styled(Widget)(({ theme }) => ({
15 
  [theme.breakpoints.down('md')]: {
2609 stevensc 16 
    '& > ul': {
2602 stevensc 17 
      display: 'flex',
2609 stevensc 18 
      '& > a': {
2602 stevensc 19 
        borderRight: '1px solid var(--border-primary)'
2580 stevensc 20 
      }
2602 stevensc 21 
    }
2580 stevensc 22 
  }
2602 stevensc 23 
}))
2580 stevensc 24 
 
2482 stevensc 25 
export default function HabitsMenu() {
2620 stevensc 26 
  const { url } = useRouteMatch()
2530 stevensc 27 
  const [open, setOpen] = useState(false)
2482 stevensc 28 
 
29 
  const handleClick = () => setOpen(!open)
30 
 
31 
  return (
2580 stevensc 32 
    <>
2602 stevensc 33 
      <Navigation>
2580 stevensc 34 
        <List
35 
          sx={{
36 
            '& .MuiListItemButton-root.active .MuiTypography-body1': {
37 
              fontWeight: '600'
38 
            }
39 
          }}
40 
        >
2584 stevensc 41 
          <ListItemButton LinkComponent={Link} to={url} exact>
2580 stevensc 42 
            <ListItemText primary='Habitos' />
43 
          </ListItemButton>
2529 stevensc 44 
 
2584 stevensc 45 
          <ListItemButton LinkComponent={Link} to={`${url}/goals`} exact>
2580 stevensc 46 
            <ListItemText primary='Metas' />
47 
          </ListItemButton>
2529 stevensc 48 
 
2580 stevensc 49 
          <ListItemButton onClick={handleClick}>
50 
            <ListItemText primary='Propósitos' />
51 
            {open ? <ExpandLess /> : <ExpandMore />}
52 
          </ListItemButton>
2482 stevensc 53 
 
2580 stevensc 54 
          <Collapse in={open} timeout='auto' unmountOnExit>
55 
            <List disablePadding>
56 
              <ListItemButton
57 
                sx={{ pl: 4 }}
58 
                LinkComponent={Link}
59 
                to={`${url}/purposes`}
60 
              >
61 
                <ListItemText primary='Propósito' />
62 
              </ListItemButton>
63 
              <ListItemButton
64 
                sx={{ pl: 4 }}
65 
                LinkComponent={Link}
66 
                to={`${url}/paradigms`}
67 
              >
68 
                <ListItemText primary='Paradigmas' />
69 
              </ListItemButton>
70 
              <ListItemButton
71 
                sx={{ pl: 4 }}
72 
                LinkComponent={Link}
73 
                to={`${url}/values`}
74 
              >
75 
                <ListItemText primary='Valores' />
76 
              </ListItemButton>
77 
            </List>
78 
          </Collapse>
79 
        </List>
80 
      </Navigation>
81 
    </>
2482 stevensc 82 
  )
83 
}