Proyectos de Subversion LeadersLinked - Backend

Rev

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