BUG: overflow-hidden not removed when resizing - making content unscrollable

[D3Portillo]

Preview

https://user-images.githubusercontent.com/26236985/173242429-b998a677-d2ce-4f91-b86b-714d7f888ccb.mp4

How to simulate

• Go to https://nextra.vercel.app/
• Resize window until Burger menu button appears
• Click on Burger menu button to open Mobile Menu
• Resize device to > 768px
• Try to scroll over page content

A Dirty Workaround

// _app.js
const ON_RESIZE = "resize"
useEffect(() => {
  function closeMobileMenu() {
    const navButton = document.querySelector("nav button.md\\:hidden")
    const isShowingMenu = document.body.classList.contains("overflow-hidden")
    if (isShowingMenu && navButton) {
      navButton.click()
    }
  }
  window.addEventListener(ON_RESIZE, closeMobileMenu)
  return () => {
    window.removeEventListener(ON_RESIZE, closeMobileMenu)
  }
}, [])

1. Basically triggers click event over the burger button whenever a resize event occurs
2. Did try just removing "overflow-hidden" in body classList but didn't function
3. I'd like to work on a solution if you consider it's an issue and of course if no-one workin on it :)

[D3Portillo]

UPDATE The hotfix won't work when virtual keyboard pops in mobiles. To fix this I've just trigger the click event when innerWidth changes at resize

// _app.js
const ON_RESIZE = "resize"
useEffect(() => {
  let storedWidth = window.innerWidth
  function closeMobileMenu() {
    const newWidth = window.innerWidth
    const navButton = document.querySelector("nav button.md\\:hidden")
    const isResizeXEvent = storedWidth !== newWidth
    const isShowingMenu = document.body.classList.contains("overflow-hidden")
    if (isShowingMenu && navButton && isResizeXEvent) {
      navButton.click()
    }
    storedWidth = newWidth
  }
  window.addEventListener(ON_RESIZE, closeMobileMenu)
  return () => {
    window.removeEventListener(ON_RESIZE, closeMobileMenu)
  }
}, [])

Hope someone finds it useful

[dimaMachina]

closing due age, I think it was fixed in Nextra v2 or v3, try to upgrade