Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 1531 Rev 1535
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React, { useState } from 'react'
2 
import { NavLink } from 'react-router-dom'
 - 
 
3 
import { Typography, styled } from '@mui/material'
 2 
import { List, ListItem, ListItemButton, Typography } from '@mui/material'
Línea 4... Línea 3...
4 
 
 3 
 
5 
import WidgetLayout from 'components/widgets/WidgetLayout'
 - 
 
6 
 
 - 
 
7 
const SideMenuContainer = styled(WidgetLayout)`
 - 
 
8 
  padding: 1rem;
 - 
 
9 
  ul {
 - 
 
10 
    display: flex;
 - 
 
11 
    flex-direction: column;
 - 
 
12 
    gap: 0.5rem;
 - 
 
13 
    a.active {
 - 
 
14 
      font-weight: 600;
 - 
 
15 
    }
 - 
 
16 
  }
 - 
 
Línea 17... Línea 4...
17 
`
 4 
import WidgetWrapper from 'components/widgets/WidgetLayout'
18 
 
 5 
 
- 
 
 6 
const SideMenu = ({ items = [], onChange = null, title = '' }) => {
19 
const SideMenu = ({ items = [], onChange = null, title = '' }) => {
 7 
  const [currentIndex, setCurrentIndex] = useState(0)
20 
  const onClick = (e, value) => {
 8 
 
21 
    if (onChange) {
 9 
  const handleChange = (index, value) => {
22 
      e.preventDefault()
 - 
 
23 
      onChange(value)
 10 
    setCurrentIndex(index)
Línea 24... Línea 11...
24 
    }
 11 
    onChange(value)
25 
  }
 12 
  }
26 
 
 13 
 
27 
  return (
 14 
  return (
28 
    <SideMenuContainer>
 15 
    <WidgetWrapper>
- 
 
 16 
      <Typography variant='h2'>{title}</Typography>
29 
      <Typography variant='h2'>{title}</Typography>
 17 
      <List>
- 
 
 18 
        {items.map(({ value, name }, index) => (
- 
 
 19 
          <ListItem
30 
      <ul>
 20 
            key={value}
31 
        {items.map(({ value, name }) => (
 21 
            sx={{ fontWeight: currentIndex === index ? 'bold' : 'normal' }}
32 
          <li key={value}>
 22 
          >
33 
            <NavLink exact to={value} onClick={(e) => onClick(e, value)}>
 23 
            <ListItemButton onClick={() => handleChange(index, value)}>
34 
              {name}
 24 
              {name}
35 
            </NavLink>
 25 
            </ListItemButton>
36 
          </li>
 26 
          </ListItem>
37 
        ))}
 27 
        ))}
38 
      </ul>
 28 
      </List>
Línea 39... Línea 29...
39 
    </SideMenuContainer>
 29 
    </WidgetWrapper>