Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 4687 | Ir a la última revisión | | 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 
 
8 
    return (
9 
        <li
10 
            class={`nav-item`}
11 
            onClick={() => item.pages && setLevelTwoShow(!levelTwoShow)}
12 
        >
13 
            <a href={`/${item.route}`} class="nav-link">
14 
                <i class={`nav-icon ${item.class}`}></i>
15 
                <p>{item.label}</p>
16 
                {
17 
                    item.pages
18 
                    &&
19 
                    <i class={levelTwoShow ? "fa fa-angle-left menu_dropdown-arrow active" : "fa fa-angle-left menu_dropdown-arrow"}></i>
20 
                }
21 
            </a>
22 
            {
23 
                item.pages
24 
                &&
25 
                <ul class="nav nav-treeview">
26 
                    {
27 
                        item.pages.map((levelTwo) =>
28 
                            <li
29 
                                class={`nav-item`}
30 
                                onClick={() => levelTwo.pages && setLevelThreeShow(!levelThreeShow)}
31 
                            >
32 
                                <a href={`/${levelTwo.route}`} class="nav-link">
33 
                                    <i class="fa fa-circle nav-icon"></i>
34 
                                    <p>{levelTwo.label}</p>
35 
                                    {
36 
                                        levelTwo.pages
37 
                                        &&
38 
                                        <i class={levelTwoShow ? "fa fa-angle-left menu_dropdown-arrow active" : "fa fa-angle-left menu_dropdown-arrow"}></i>
39 
                                    }
40 
                                </a>
41 
                                {
42 
                                    levelTwo.pages
43 
                                    &&
44 
                                    <ul class="nav nav-treeview">
45 
                                        {
46 
                                            levelTwo.pages.map((levelThree) =>
47 
                                                <li class={`nav-item`}>
48 
                                                    <a href={`/${levelThree.route}`} class="nav-link">
49 
                                                        <i class="fa fa-circle-o nav-icon"></i>
50 
                                                        <p>{levelThree.label}</p>
51 
                                                    </a>
52 
                                                </li>)
53 
                                        }
54 
                                    </ul>
55 
                                }
56 
                            </li>)
57 
                    }
58 
                </ul>
59 
            }
60 
        </li>
61 
    )
62 
}
63 
 
64 
export default MenuItem