Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import './HeaderOptions.scss'

import './Dropdowns.scss'

import useOutsideClick from '../../../hooks/useOutsideClick'

const HeaderOptions = ({ Icon, title, url, childs = [], isMobile = false }) => {

    const [displayMenu, setDisplayMenu] = useState(false)

    const menu = useRef(null)

    const outsideClick = useOutsideClick(menu)

    useEffect(() => {

        if (outsideClick) setDisplayMenu(false)

    }, [outsideClick])

    return (

        <li ref={menu} className={!isMobile && 'd-none d-md-block'}>

            <a

                href={url}

                className={`header__option ${isMobile && 'mobile'} ${displayMenu && 'active'}`}

                onClick={(e) => {

                    if (childs.length) {

                        e.preventDefault()

                        setDisplayMenu(!displayMenu)

                    }

                }}

                target='framename'

            >

                {Icon && <Icon className="header__option-icon" />}

                <span>{title}</span>

            </a>

            {!!childs.length &&

                <nav className={`nav__options-dropdown ${isMobile && 'mobile'} ${displayMenu && 'show'}`}>

                    <ul>{childs.map((linkOption, index) =>

                        <li key={index}>

                            {linkOption.childs?.length

                                ? <a href='/' onClick={(e) => e.preventDefault()}>{linkOption.label}</a>

                                : <a href={linkOption.href} target='framename'>{linkOption.label}</a>

                            }

                            {!!linkOption.childs?.length &&

                                <nav className='navLinkLevelThree'>

                                    <ul>

                                        {linkOption.childs?.map((optionsChild, index) =>

                                            <li key={index}>

                                                <a href={optionsChild.href} target='framename'>{optionsChild.label}</a>

                                            </li>

                                        )}

                                    </ul>

                                </nav>

                            }

                        </li>

                    )}

                    </ul>

                </nav>

            }

        </li>

    )

}

export default HeaderOptions