let slideUp = (target) => {
    target.style.height = target.offsetHeight + 'px';
    target.style.overflow = 'hidden';
    target.style.transition = "all 0.3s ease";
    target.style.height = 0;
    window.setTimeout( () => {
        target.style.display = 'none';
        target.style.removeProperty('overflow');
        target.style.removeProperty('transition');
    }, 300);
}

let slideDown = (target) => {
    target.style.removeProperty('display');
    let display = window.getComputedStyle(target).display;

    if (display === 'none')
        display = 'block';

    target.style.display = display;
    let height = 0;

    let children = target.childNodes;
    children.forEach(function(item){
        height = height + item.offsetHeight;
    });

    target.style.overflow = 'hidden';
    target.style.height = 0 + 'px';
    target.style.transition = "all 0.3s ease";
    target.style.height = height + 'px';
    window.setTimeout( () => {
        target.style.removeProperty('overflow');
        target.style.removeProperty('transition');
    }, 300);
}

let slideToggle = (target) => {
    if (window.getComputedStyle(target).display === 'none') {
        return slideDown(target);
    } else {
        return slideUp(target);
    }
}



const renderMenu = (items, nav_class, depth) => {
    return <ul className={nav_class ? nav_class : "collapse"} style={{height: nav_class ? '' : 0}}>
        {items.map((i, key) => {
            return <li key={key}>
              <a href={i.link} className={i.menu && "has-arrow"} onClick={(e)=>{
                if(i.menu){
                    slideToggle(e.target.nextElementSibling);
                }
              }}>
                  {!depth && <i className={i.icon ? i.icon : "icon-docs"}></i>}
                  {i.title}
                  {i.badge && <span className={'badge float-right ' + (i.badge.color)}>{i.badge.text}</span>}
              </a>
                {i.menu && renderMenu(i.menu)}
            </li>
        })}
    </ul>
}