3.1.0 • Published 2 years ago
@annelund87/burger v3.1.0
burger
JSX-code:
import styles from '@annelund87/burger'
function Burger() { const toggleMenu, setToggleMenu = useState(false)
const toggleNav = () => { setToggleMenu(!toggleMenu) }
const screenWidth, setScreenWidth = useState(window.innerWidth)
useEffect(() => { const changeWidth = () => { setScreenWidth(window.innerWidth); }
window.addEventListener('resize', changeWidth)
return () => {
window.removeEventListener('resize', changeWidth)
}
}, [])
return (
<nav>
{(toggleMenu || screenWidth > 500) && (
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
)}
<div className='burger-btn' onClick={toggleNav}>
<span></span>
<span></span>
<span></span>
</div>
</nav>
) }
export default Burger;