0

What i'm trying to accomplish is exactly the same open and close menu animation while change router as this React app on github, but using Next.js(it's is pretty much the same code)

Here is my app repo on github, and here the app live.

I'm trying to follow the Next.js documentation, but it seems that the state of menuOpened is not being updated.

import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { withRouter, useRouter } from 'next/router'
import { UpArrowCircle } from '@/components/SvgFiles'
import { openMenu, closeMenu } from '@/components/MenuAnimations'

const Header = ({ dimensions }) => {
  const [menuState, setMenuState] = useState({ menuOpened: false })
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      // console.log(`App is changing to ${url}`)
      setMenuState({ menuOpened: false })
    }

    if (menuState.menuOpened === true) {
      openMenu(dimensions.width)
    } else if (menuState.menuOpened === false) {
      closeMenu()
    }

    router.events.on('routeChangeStart', handleRouteChange)

    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
  })

   return (
    <header className="header">
      <div className="container">
        <div className="row v-center space-between">
          <div className="logo">
            <Link href="/">
              <a>AGENCY</a>
            </Link>
          </div>
          <div className="nav-toggle">
            <div
              onClick={() => setMenuState({ menuOpened: true })}
              className="hamburger-menu"
            >
              <span></span>
              <span></span>
            </div>
            <div
              className="hamburger-menu-close"
              onClick={() => setMenuState({ menuOpened: false })}
            >
              <UpArrowCircle />
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
export default withRouter(Header)

Any help are welcome! Cheers!

Clovis Rosa
  • 147
  • 7
  • 1
    I just checked out your code from Github. So the problem is that the state change works but there is no animation, as far as I can tell. Where do the contents of this header popup menu come from? They don't seem to be in the file. – Gh05d Apr 28 '21 at 08:39
  • 1
    Hey @Gh05d, thak you for your time! If you click(open and close)on the humburger menu (https://nextjs-portifolio-website.vercel.app/), you will see that the animation is being trigged. But when you open the menu and click on any link on it, the router changed but no animation is being called. The component of this header is coming from `Navigation.jsx` and the animation from `MenuAnimations.jsx` inside the `src/components` folder. – Clovis Rosa Apr 28 '21 at 13:39

0 Answers0