AutorÃa | Ultima modificación | Ver Log |
import React, { useState } from 'react'
const MenuDropdown = ({ item }) => {
const [isShow, setIsShow] = useState(false);
return (
<li class={`nav-item`}>
{
item.route
?
<a href={`/${item.route}`} class="nav-link">
<i class={`nav-icon ${item.class}`}></i>
<p>{item.label}</p>
</a>
:
<>
<i class={`nav-icon ${item.class}`}></i>
<p>{item.label}</p>
<i class="fa fa-angle-left"></i>
</>
}
{
item.pages
&&
<ul class="nav nav-treeview" style={isShow ? { display: 'block' } : { display: 'none' }}>
{
item.pages.map((levelTwo) =>
<li class={`nav-item`}>
<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" style={isShow ? { display: 'block' } : { display: 'none' }}>
{
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 MenuDropdown