Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3585 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3201 stevensc 1 
import React, { useState } from 'react'
2 
import { Link, useNavigate } from 'react-router-dom'
3 
import { Badge, styled } from '@mui/material'
4 
 
5 
import { useOutsideClick } from '@hooks'
6 
 
7 
import ListItemDropdown from './ListItemDropdown'
8 
 
9 
import './Dropdowns.scss'
10 
import { getAdminUrl } from '@app/services/admin'
11 
import { useDispatch } from 'react-redux'
12 
import { addNotification } from '@app/redux/notification/notification.actions'
13 
 
14 
const NavItem = styled(Link)(({ theme }) => ({
15 
  position: 'relative',
16 
  display: 'flex',
17 
  flexDirection: 'column',
18 
  alignItems: 'center',
19 
  justifyContent: 'center',
20 
  padding: theme.spacing(1, 0),
21 
  fontSize: '12px',
22 
  fontWeight: 400,
23 
  height: '100%',
24 
  '&::after': {
25 
    borderBottom: '2px solid var(--font-color)',
26 
    content: '""',
27 
    bottom: '-1px',
28 
    left: 0,
29 
    position: 'absolute',
30 
    transform: 'scaleX(0)',
31 
    transition: 'transform 0.2s ease-in-out',
32 
    width: '100%'
33 
  },
34 
  '&.active::after, &:hover::after': {
35 
    transform: 'scaleX(1)'
36 
  },
37 
  [theme.breakpoints.up('lg')]: {
38 
    minWidth: '60px'
39 
  },
40 
  [theme.breakpoints.down('md')]: {
41 
    fontSize: 0
42 
  }
43 
}))
44 
 
45 
const NavigationItem = ({
46 
  ajax = 0,
47 
  url = '',
48 
  childs = [],
49 
  count = 0,
50 
  onClick,
51 
  children
52 
}) => {
53 
  const [displayMenu, setDisplayMenu] = useState(false)
54 
 
55 
  const navigate = useNavigate()
56 
  const dispatch = useDispatch()
57 
 
58 
  const [menu] = useOutsideClick(() => setDisplayMenu(false))
59 
 
60 
  const toggleMenu = () => setDisplayMenu(!displayMenu)
61 
 
62 
  const openAdmin = async () => {
63 
    try {
64 
      const adminUrl = await getAdminUrl(url)
65 
      window.open(adminUrl, '_blank')
66 
    } catch (error) {
67 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
68 
    }
69 
  }
70 
 
71 
  const handleClick = async (e) => {
72 
    e.preventDefault()
73 
 
74 
    if (ajax) {
75 
      openAdmin()
76 
      return
77 
    }
78 
 
79 
    if (onClick) {
80 
      onClick()
81 
      return
82 
    }
83 
 
84 
    if (childs.length) {
85 
      toggleMenu()
86 
      return
87 
    }
88 
 
89 
    navigate(`/${url}`)
90 
  }
91 
 
92 
  return (
93 
    <li ref={menu}>
94 
      <NavItem
95 
        to={url}
96 
        onClick={handleClick}
97 
        className={displayMenu ? 'active' : ''}
98 
      >
99 
        {children}
100 
 
101 
        <Badge
102 
          badgeContent={count}
103 
          color='error'
104 
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
105 
        />
106 
      </NavItem>
107 
 
108 
      <ListItemDropdown
109 
        isShow={displayMenu}
110 
        options={childs}
111 
        onSelect={toggleMenu}
112 
      />
113 
    </li>
114 
  )
115 
}
116 
 
117 
export default NavigationItem