Next.js + Tailwind - HamburgerMenu is either scrolled past or cut off

Repo: https://github.com/waikoo/thrifty Live: https://thrifty-seven.vercel.app If you navigate to the live page on a mobile device, press the hamburger icon from the bottom NavBar, you'll notice you can't scroll downwards. If you take a look at the gif, it works for me as I'd expect this to work on the dev server when the viewport is as small vertically to cut off the whole height of the hamburger menu. I have this useEffect in my component that adds the overflow-hidden class on component mount and removes it on dismount to the body. I suspect this is what does not let me scroll it further on the live site... but then why does it work as I want it to work on the dev server? (gif 1) The problem is that removing the useEffect will let me scroll past the Hamburger menu, further downwards on the home page which is not what I want. (gif nr 2) How to solve this please?

GitHub

GitHub - waikoo/thrifty: A mock online thrift-shop

A mock online thrift-shop. Contribute to waikoo/thrifty development by creating an account on GitHub.

Thrifty

An e-commerce store for second-hand clothing

GitHub

thrifty/app/components/navigation/HamburgerMenu.tsx at main · waiko...

A mock online thrift-shop. Contribute to waikoo/thrifty development by creating an account on GitHub.