Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2531 | Rev 2584 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2531 Rev 2580
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { NavLink as Link, useRouteMatch } from 'react-router-dom'
 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
3 
import { Collapse, List, ListItemButton, ListItemText } from '@mui/material'
 10 
} from '@mui/material'
- 
 
 11 
import {
- 
 
 12 
  ExpandLess,
- 
 
 13 
  ExpandMore,
- 
 
 14 
  EventRepeat,
- 
 
 15 
  MoveUp,
- 
 
 16 
  TrackChanges
4 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
 17 
} from '@mui/icons-material'
Línea 5... Línea 18...
5 
 
 18 
 
Línea -... Línea 19...
- 
 
 19 
import Widget from '@app/components/UI/Widget'
- 
 
 20 
 
- 
 
 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 
`
6 
import Widget from '@app/components/UI/Widget'
 51 
)
7 
 
 52 
 
8 
export default function HabitsMenu() {
 53 
export default function HabitsMenu() {
Línea 9... Línea 54...
9 
  const { url } = useRouteMatch()
 54 
  const { url } = useRouteMatch()
Línea -... Línea 55...
- 
 
 55 
  const [open, setOpen] = useState(false)
- 
 
 56 
 
- 
 
 57 
  const handleClick = () => setOpen(!open)
- 
 
 58 
 
- 
 
 59 
  const routes = [
- 
 
 60 
    { name: 'Hábitos', value: '/habits', icon: <EventRepeat /> },
10 
  const [open, setOpen] = useState(false)
 61 
    { name: 'Metas', value: '/goals', icon: <MoveUp /> },
11 
 
 62 
    { name: 'Propósitos', value: '/purposes', icon: <TrackChanges /> }
- 
 
 63 
  ]
12 
  const handleClick = () => setOpen(!open)
 64 
 
13 
 
 65 
  return (
14 
  return (
 66 
    <>
15 
    <Widget>
 67 
      <Widget styles={{ display: { xs: 'none', md: 'block' } }}>
16 
      <List
 68 
        <List
17 
        sx={{
 69 
          sx={{
18 
          '& .MuiListItemButton-root.active .MuiTypography-body1': {
 70 
            '& .MuiListItemButton-root.active .MuiTypography-body1': {
19 
            fontWeight: '600'
 71 
              fontWeight: '600'
20 
          }
 72 
            }
21 
        }}
 73 
          }}
22 
      >
 74 
        >
23 
        <ListItemButton LinkComponent={Link} to={url}>
 75 
          <ListItemButton LinkComponent={Link} to={url}>
24 
          <ListItemText primary='Habitos' />
 76 
            <ListItemText primary='Habitos' />
25 
        </ListItemButton>
 77 
          </ListItemButton>
26 
 
 78 
 
27 
        <ListItemButton LinkComponent={Link} to={`${url}/goals`}>
 79 
          <ListItemButton LinkComponent={Link} to={`${url}/goals`}>
28 
          <ListItemText primary='Metas' />
 80 
            <ListItemText primary='Metas' />
29 
        </ListItemButton>
 81 
          </ListItemButton>
30 
 
 82 
 
31 
        <ListItemButton onClick={handleClick}>
 83 
          <ListItemButton onClick={handleClick}>
32 
          <ListItemText primary='Propósito' />
 84 
            <ListItemText primary='Propósitos' />
33 
          {open ? <ExpandLess /> : <ExpandMore />}
 85 
            {open ? <ExpandLess /> : <ExpandMore />}
34 
        </ListItemButton>
 86 
          </ListItemButton>
35 
 
 87 
 
36 
        <Collapse in={open} timeout='auto' unmountOnExit>
 88 
          <Collapse in={open} timeout='auto' unmountOnExit>
37 
          <List disablePadding>
 89 
            <List disablePadding>
38 
            <ListItemButton
 90 
              <ListItemButton
39 
              sx={{ pl: 4 }}
 91 
                sx={{ pl: 4 }}
40 
              LinkComponent={Link}
 92 
                LinkComponent={Link}
41 
              to={`${url}/purposes`}
 93 
                to={`${url}/purposes`}
42 
            >
 94 
              >
43 
              <ListItemText primary='Propósito' />
 95 
                <ListItemText primary='Propósito' />
44 
            </ListItemButton>
 96 
              </ListItemButton>
45 
            <ListItemButton
 97 
              <ListItemButton
46 
              sx={{ pl: 4 }}
 98 
                sx={{ pl: 4 }}
47 
              LinkComponent={Link}
 99 
                LinkComponent={Link}
48 
              to={`${url}/paradigms`}
 100 
                to={`${url}/paradigms`}
49 
            >
 101 
              >
50 
              <ListItemText primary='Paradigmas' />
 102 
                <ListItemText primary='Paradigmas' />
51 
            </ListItemButton>
 103 
              </ListItemButton>
52 
            <ListItemButton
 104 
              <ListItemButton
53 
              sx={{ pl: 4 }}
 105 
                sx={{ pl: 4 }}
54 
              LinkComponent={Link}
 106 
                LinkComponent={Link}
55 
              to={`${url}/values`}
 107 
                to={`${url}/values`}
56 
            >
 108 
              >
57 
              <ListItemText primary='Valores' />
 109 
                <ListItemText primary='Valores' />
58 
            </ListItemButton>
 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>
59 
          </List>
 124 
          ))}
60 
        </Collapse>
 125 
        </ul>