50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
import {
|
|
useState,
|
|
useEffect
|
|
} from 'react'
|
|
import './dropdown.css'
|
|
|
|
export default function Dropdown(props) {
|
|
const [hidden, setHidden] = useState(true)
|
|
|
|
const toggleDropdown = () => {
|
|
setHidden(!hidden)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className='dropdown'>
|
|
<section
|
|
className='text'
|
|
onClick={() => toggleDropdown()}
|
|
>
|
|
<span className='content'>{props.text}</span>
|
|
<span className={`icon ${hidden ? '' : 'active'}`}></span>
|
|
</section>
|
|
<ul className={`menu ${hidden ? '' : 'active'}`}>
|
|
{
|
|
props.menu.map((item) => {
|
|
return (
|
|
<li
|
|
key={item.name}
|
|
className={`item${item.name === props.text ? ' active' : ''}`}
|
|
onClick={() => {
|
|
props.onClick(item)
|
|
toggleDropdown()
|
|
}}
|
|
>
|
|
{item.name}
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
</ul>
|
|
<section
|
|
className='overlay'
|
|
hidden={hidden}
|
|
onClick={() => toggleDropdown()}
|
|
/>
|
|
</section>
|
|
</>
|
|
)
|
|
} |