Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 4777 | Rev 4784 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4682 stevensc 1 
import React, { useState } from 'react'
2 
 
3 
const MenuItem = ({ item }) => {
4 
 
5 
    const [levelTwoShow, setLevelTwoShow] = useState(false);
6 
    const [levelThreeShow, setLevelThreeShow] = useState(false);
7 
 
4699 stevensc 8 
    const handleShow = (event) => {
9 
        setLevelThreeShow(!levelThreeShow)
10 
    }
11 
 
4682 stevensc 12 
    return (
13 
        <li
14 
            class={`nav-item`}
15 
            onClick={() => item.pages && setLevelTwoShow(!levelTwoShow)}
16 
        >
17 
            <a href={`/${item.route}`} class="nav-link">
18 
                <i class={`nav-icon ${item.class}`}></i>
19 
                <p>{item.label}</p>
20 
                {
21 
                    item.pages
22 
                    &&
23 
                    <i class={levelTwoShow ? "fa fa-angle-left menu_dropdown-arrow active" : "fa fa-angle-left menu_dropdown-arrow"}></i>
24 
                }
25 
            </a>
26 
            {
27 
                item.pages
28 
                &&
29 
                <ul class="nav nav-treeview">
30 
                    {
31 
                        item.pages.map((levelTwo) =>
32 
                            <li
33 
                                class={`nav-item`}
4699 stevensc 34 
                                onClick={(e) => levelTwo.pages && handleShow(e)}
4682 stevensc 35 
                            >
36 
                                {
37 
                                    levelTwo.pages
4777 stevensc 38 
                                        ?
39 
                                        <label class="nav-link">
40 
                                            <i class="fa fa-circle nav-icon"></i>
41 
                                            <p>{levelTwo.label}</p>
42 
                                            <i class={levelThreeShow ? "fa fa-angle-left menu_dropdown-arrow active" : "fa fa-angle-left menu_dropdown-arrow"}></i>
43 
                                        </label>
44 
                                        :
45 
                                        <a href={`/${levelTwo.route}`} class="nav-link">
46 
                                            <i class="fa fa-circle nav-icon"></i>
47 
                                            <p>{levelTwo.label}</p>
48 
                                        </a>
49 
                                }
50 
                                {
51 
                                    levelTwo.pages
4682 stevensc 52 
                                    &&
53 
                                    <ul class="nav nav-treeview">
54 
                                        {
55 
                                            levelTwo.pages.map((levelThree) =>
56 
                                                <li class={`nav-item`}>
57 
                                                    <a href={`/${levelThree.route}`} class="nav-link">
58 
                                                        <i class="fa fa-circle-o nav-icon"></i>
59 
                                                        <p>{levelThree.label}</p>
60 
                                                    </a>
61 
                                                </li>)
62 
                                        }
63 
                                    </ul>
64 
                                }
65 
                            </li>)
66 
                    }
67 
                </ul>
68 
            }
69 
        </li>
70 
    )
71 
}
72 
 
73 
export default MenuItem