Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2630 | Rev 3246 | 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'
2622 stevensc 2
import { NavLink as Link } 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() {
2530 stevensc 26
  const [open, setOpen] = useState(false)
2482 stevensc 27
 
28
  const handleClick = () => setOpen(!open)
29
 
30
  return (
2580 stevensc 31
    <>
2602 stevensc 32
      <Navigation>
2580 stevensc 33
        <List
34
          sx={{
35
            '& .MuiListItemButton-root.active .MuiTypography-body1': {
36
              fontWeight: '600'
37
            }
38
          }}
39
        >
2652 stevensc 40
          <ListItemButton LinkComponent={Link} to='/habits' exact>
2580 stevensc 41
            <ListItemText primary='Habitos' />
42
          </ListItemButton>
2529 stevensc 43
 
2622 stevensc 44
          <ListItemButton LinkComponent={Link} to='goals' exact>
2580 stevensc 45
            <ListItemText primary='Metas' />
46
          </ListItemButton>
2529 stevensc 47
 
2580 stevensc 48
          <ListItemButton onClick={handleClick}>
49
            <ListItemText primary='Propósitos' />
50
            {open ? <ExpandLess /> : <ExpandMore />}
51
          </ListItemButton>
2482 stevensc 52
 
2580 stevensc 53
          <Collapse in={open} timeout='auto' unmountOnExit>
54
            <List disablePadding>
2622 stevensc 55
              <ListItemButton sx={{ pl: 4 }} LinkComponent={Link} to='purposes'>
2580 stevensc 56
                <ListItemText primary='Propósito' />
57
              </ListItemButton>
58
              <ListItemButton
59
                sx={{ pl: 4 }}
60
                LinkComponent={Link}
2622 stevensc 61
                to='paradigms'
2580 stevensc 62
              >
63
                <ListItemText primary='Paradigmas' />
64
              </ListItemButton>
2622 stevensc 65
              <ListItemButton sx={{ pl: 4 }} LinkComponent={Link} to='values'>
2580 stevensc 66
                <ListItemText primary='Valores' />
67
              </ListItemButton>
68
            </List>
69
          </Collapse>
70
        </List>
71
      </Navigation>
72
    </>
2482 stevensc 73
  )
74
}