Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3299 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3299 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { NavLink as Link, useMatch } from 'react-router-dom'
 2 
import { NavLink as Link, useMatch } from 'react-router-dom';
3 
import {
 - 
 
4 
  List,
 - 
 
5 
  ListItem,
 - 
 
6 
  ListItemButton,
 - 
 
7 
  ListItemIcon,
 - 
 
8 
  ListItemText
 - 
 
9 
} from '@mui/material'
 3 
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
10 
 
 4 
 
11 
import Widget from '@app/components/UI/Widget'
 5 
import Widget from '@app/components/UI/Widget';
12 
 
 6 
 
13 
export default function Menu({ children }) {
 7 
export default function Menu({ children }) {
14 
  return (
 8 
  return (
15 
    <Widget
 9 
    <Widget
16 
      styles={{
 10 
      styles={{
17 
        position: { xs: 'fixed', md: 'relative' },
 11 
        position: { xs: 'fixed', md: 'relative' },
18 
        bottom: { xs: 0, md: 'auto' },
 12 
        bottom: { xs: 0, md: 'auto' },
19 
        left: { xs: 0, md: 'auto' },
 13 
        left: { xs: 0, md: 'auto' },
20 
        zIndex: { xs: 1100, md: 0 },
 14 
        zIndex: { xs: 1100, md: 0 },
21 
        borderWidth: '1px 0 0'
 15 
        borderWidth: '1px 0 0'
22 
      }}
 16 
      }}
23 
    >
 17 
    >
24 
      <List
 18 
      <List
25 
        sx={{
 19 
        sx={{
26 
          display: 'flex',
 20 
          display: 'flex',
27 
          flexDirection: { xs: 'row', md: 'column' },
 21 
          flexDirection: { xs: 'row', md: 'column' },
28 
          width: '100%',
 22 
          width: '100%',
29 
 
 23 
 
30 
          gap: ({ spacing }) => spacing(0.5)
 24 
          gap: ({ spacing }) => spacing(0.5)
31 
        }}
 25 
        }}
32 
      >
 26 
      >
33 
        {children}
 27 
        {children}
34 
      </List>
 28 
      </List>
35 
    </Widget>
 29 
    </Widget>
36 
  )
 30 
  );
37 
}
 31 
}
38 
 
 32 
 
39 
function MenuItem({ to, icon, label, onClick }) {
 33 
function MenuItem({ to, icon, label, onClick }) {
40 
  const match = useMatch(to)
 34 
  const match = useMatch(to);
41 
 
 35 
 
42 
  return (
 36 
  return (
43 
    <ListItem sx={{ display: match ? 'none' : 'flex' }}>
 37 
    <ListItem sx={{ display: match ? 'none' : 'flex' }}>
44 
      <ListItemButton LinkComponent={Link} to={to} onClick={onClick}>
 38 
      <ListItemButton LinkComponent={Link} to={to} onClick={onClick}>
45 
        {icon && <ListItemIcon>{icon}</ListItemIcon>}
 39 
        {icon && <ListItemIcon>{icon}</ListItemIcon>}
46 
        <ListItemText
 - 
 
47 
          primary={label}
 - 
 
48 
          sx={{ textAlign: { xs: 'center', md: 'start' } }}
 40 
        <ListItemText primary={label} sx={{ textAlign: { xs: 'center', md: 'start' } }} />
49 
        />
 - 
 
50 
      </ListItemButton>
 41 
      </ListItemButton>
51 
    </ListItem>
 42 
    </ListItem>
52 
  )
 43 
  );
53 
}
 44 
}
54 
 
 45 
 
55 
Menu.Item = MenuItem
 46 
Menu.Item = MenuItem;