Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2580 | Rev 2602 | 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'
2580 stevensc 2 
import { NavLink as Link, useRouteMatch, NavLink } from 'react-router-dom'
3 
import {
4 
  Box,
5 
  Collapse,
6 
  List,
7 
  ListItemButton,
8 
  ListItemText,
9 
  styled
10 
} from '@mui/material'
11 
import {
12 
  ExpandLess,
13 
  ExpandMore,
14 
  EventRepeat,
15 
  MoveUp,
16 
  TrackChanges
17 
} from '@mui/icons-material'
2482 stevensc 18 
 
19 
import Widget from '@app/components/UI/Widget'
20 
 
2580 stevensc 21 
const Navigation = styled(Box)(
22 
  ({ theme }) => `
23 
  position: fixed;
24 
  bottom: 0;
25 
  left: 0;
26 
  width: 100%;
27 
  background-color: ${theme.palette.background.default};
28 
  padding: 1rem;
29 
  display: none;
30 
  z-index: 100;
31 
  ul {
32 
    display: flex;
33 
    align-items: center;
34 
    justify-content: space-between;
35 
    gap: 1rem;
36 
    width: 100%;
37 
    li a {
38 
        color: ${theme.palette.text.primary};
39 
        display: flex;
40 
        flex-direction: column;
41 
        align-items: center;
42 
        &.active {
43 
          font-weight: 600;
44 
        }
45 
      }
46 
  }
47 
  ${theme.breakpoints.down('md')} {
48 
    display: flex;
49 
  }
50 
`
51 
)
52 
 
2482 stevensc 53 
export default function HabitsMenu() {
2527 stevensc 54 
  const { url } = useRouteMatch()
2530 stevensc 55 
  const [open, setOpen] = useState(false)
2482 stevensc 56 
 
57 
  const handleClick = () => setOpen(!open)
58 
 
2580 stevensc 59 
  const routes = [
60 
    { name: 'Hábitos', value: '/habits', icon: <EventRepeat /> },
61 
    { name: 'Metas', value: '/goals', icon: <MoveUp /> },
62 
    { name: 'Propósitos', value: '/purposes', icon: <TrackChanges /> }
63 
  ]
64 
 
2482 stevensc 65 
  return (
2580 stevensc 66 
    <>
67 
      <Widget styles={{ display: { xs: 'none', md: 'block' } }}>
68 
        <List
69 
          sx={{
70 
            '& .MuiListItemButton-root.active .MuiTypography-body1': {
71 
              fontWeight: '600'
72 
            }
73 
          }}
74 
        >
2584 stevensc 75 
          <ListItemButton LinkComponent={Link} to={url} exact>
2580 stevensc 76 
            <ListItemText primary='Habitos' />
77 
          </ListItemButton>
2529 stevensc 78 
 
2584 stevensc 79 
          <ListItemButton LinkComponent={Link} to={`${url}/goals`} exact>
2580 stevensc 80 
            <ListItemText primary='Metas' />
81 
          </ListItemButton>
2529 stevensc 82 
 
2580 stevensc 83 
          <ListItemButton onClick={handleClick}>
84 
            <ListItemText primary='Propósitos' />
85 
            {open ? <ExpandLess /> : <ExpandMore />}
86 
          </ListItemButton>
2482 stevensc 87 
 
2580 stevensc 88 
          <Collapse in={open} timeout='auto' unmountOnExit>
89 
            <List disablePadding>
90 
              <ListItemButton
91 
                sx={{ pl: 4 }}
92 
                LinkComponent={Link}
93 
                to={`${url}/purposes`}
94 
              >
95 
                <ListItemText primary='Propósito' />
96 
              </ListItemButton>
97 
              <ListItemButton
98 
                sx={{ pl: 4 }}
99 
                LinkComponent={Link}
100 
                to={`${url}/paradigms`}
101 
              >
102 
                <ListItemText primary='Paradigmas' />
103 
              </ListItemButton>
104 
              <ListItemButton
105 
                sx={{ pl: 4 }}
106 
                LinkComponent={Link}
107 
                to={`${url}/values`}
108 
              >
109 
                <ListItemText primary='Valores' />
110 
              </ListItemButton>
111 
            </List>
112 
          </Collapse>
113 
        </List>
114 
      </Widget>
115 
      <Navigation sx={{ boxShadow: 2 }}>
116 
        <ul>
117 
          {routes.map(({ value, name, icon }) => (
118 
            <li key={value}>
119 
              <NavLink exact to={value}>
120 
                {icon}
121 
                {name}
122 
              </NavLink>
123 
            </li>
124 
          ))}
125 
        </ul>
126 
      </Navigation>
127 
    </>
2482 stevensc 128 
  )
129 
}