Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

const MenuItem = ({ item }) => {

    const [levelTwoShow, setLevelTwoShow] = useState(false);
    const [levelThreeShow, setLevelThreeShow] = useState(false);

    const handleShow = (event) => {
        setLevelThreeShow(!levelThreeShow)
    }

    return (
        <li
            class={`nav-item`}
            onClick={() => item.pages && setLevelTwoShow(!levelTwoShow)}
        >
            <a href={`/${item.route}`} class="nav-link">
                <i class={`nav-icon ${item.class}`}></i>
                <p>{item.label}</p>
                {
                    item.pages
                    &&
                    <i class={levelTwoShow ? "fa fa-angle-left menu_dropdown-arrow active" : "fa fa-angle-left menu_dropdown-arrow"}></i>
                }
            </a>
            {
                item.pages
                &&
                <ul class="nav nav-treeview">
                    {
                        item.pages.map((levelTwo) =>
                            <li
                                class={`nav-item`}
                                onClick={(e) => levelTwo.pages && handleShow(e)}
                            >
                                {
                                    levelTwo.pages
                                        ?
                                        <label class="nav-link">
                                            <i class="fa fa-circle nav-icon"></i>
                                            <p>{levelTwo.label}</p>
                                            <i class={levelThreeShow ? "fa fa-angle-left menu_dropdown-arrow active" : "fa fa-angle-left menu_dropdown-arrow"}></i>
                                        </label>
                                        :
                                        <a href={`/${levelTwo.route}`} class="nav-link">
                                            <i class="fa fa-circle nav-icon"></i>
                                            <p>{levelTwo.label}</p>
                                        </a>
                                }
                                {
                                    levelTwo.pages
                                    &&
                                    <ul class="nav nav-treeview">
                                        {
                                            levelTwo.pages.map((levelThree) =>
                                                <li class={`nav-item`}>
                                                    <a href={`/${levelThree.route}`} class="nav-link">
                                                        <i class="fa fa-circle-o nav-icon"></i>
                                                        <p>{levelThree.label}</p>
                                                    </a>
                                                </li>)
                                        }
                                    </ul>
                                }
                            </li>)
                    }
                </ul>
            }
        </li>
    )
}

export default MenuItem