Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2584 Rev 2602
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { NavLink as Link, useRouteMatch, NavLink } from 'react-router-dom'
 2 
import { NavLink as Link, useRouteMatch } from 'react-router-dom'
3 
import {
 3 
import {
4 
  Box,
 - 
 
5 
  Collapse,
 4 
  Collapse,
6 
  List,
 5 
  List,
7 
  ListItemButton,
 6 
  ListItemButton,
8 
  ListItemText,
 7 
  ListItemText,
9 
  styled
 8 
  styled
10 
} from '@mui/material'
 9 
} from '@mui/material'
11 
import {
 - 
 
12 
  ExpandLess,
 - 
 
13 
  ExpandMore,
 - 
 
14 
  EventRepeat,
 - 
 
15 
  MoveUp,
 - 
 
16 
  TrackChanges
 - 
 
17 
} from '@mui/icons-material'
 10 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
Línea 18... Línea 11...
18 
 
 11 
 
Línea 19... Línea 12...
19 
import Widget from '@app/components/UI/Widget'
 12 
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;
 13 
 
33 
    align-items: center;
 - 
 
34 
    justify-content: space-between;
 - 
 
35 
    gap: 1rem;
 14 
const Navigation = styled(Widget)(({ theme }) => ({
36 
    width: 100%;
 - 
 
37 
    li a {
 15 
  [theme.breakpoints.down('md')]: {
38 
        color: ${theme.palette.text.primary};
 16 
    '& ul': {
39 
        display: flex;
 17 
      display: 'flex',
40 
        flex-direction: column;
 - 
 
41 
        align-items: center;
 - 
 
42 
        &.active {
 - 
 
43 
          font-weight: 600;
 18 
      '& a:not(:first-child)': {
- 
 
 19 
        borderRight: '1px solid var(--border-primary)'
44 
        }
 20 
      }
45 
      }
 - 
 
46 
  }
 - 
 
47 
  ${theme.breakpoints.down('md')} {
 - 
 
48 
    display: flex;
 - 
 
49 
  }
 21 
    }
Línea 50... Línea 22...
50 
`
 22 
  }
51 
)
 23 
}))
52 
 
 24 
 
Línea 53... Línea 25...
53 
export default function HabitsMenu() {
 25 
export default function HabitsMenu() {
Línea 54... Línea -...
54 
  const { url } = useRouteMatch()
 - 
 
55 
  const [open, setOpen] = useState(false)
 - 
 
56 
 
 - 
 
57 
  const handleClick = () => setOpen(!open)
 - 
 
58 
 
 - 
 
59 
  const routes = [
 - 
 
60 
    { name: 'Hábitos', value: '/habits', icon: <EventRepeat /> },
 26 
  const { url } = useRouteMatch()
61 
    { name: 'Metas', value: '/goals', icon: <MoveUp /> },
 27 
  const [open, setOpen] = useState(false)
62 
    { name: 'Propósitos', value: '/purposes', icon: <TrackChanges /> }
 28 
 
63 
  ]
 29 
  const handleClick = () => setOpen(!open)
64 
 
 30 
 
65 
  return (
 31 
  return (
66 
    <>
 32 
    <>
67 
      <Widget styles={{ display: { xs: 'none', md: 'block' } }}>
 33 
      <Navigation>
Línea 109... Línea 75...
109 
                <ListItemText primary='Valores' />
 75 
                <ListItemText primary='Valores' />
110 
              </ListItemButton>
 76 
              </ListItemButton>
111 
            </List>
 77 
            </List>
112 
          </Collapse>
 78 
          </Collapse>
113 
        </List>
 79 
        </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>
 80 
      </Navigation>
127 
    </>
 81 
    </>
128 
  )
 82 
  )
129 
}
 83 
}