@annelund87/burger

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;