<commit_before>import { breakpoint, Hidden } from '@amsterdam/asc-ui'
import type { FunctionComponent } from 'react'
import { useEffect, useState } from 'react'
import styled from 'styled-components'
import { HeaderSearchProvider } from '../../contexts/HeaderSearch/HeaderSearchContext'
import MobileHeaderNav from './MobileHeaderNav'
import MobileHeaderSearch from './MobileHeaderSearch'
import useWindowWidth from '../../hooks/useWindowWidth/useWindowWidth'

const StyledMobileMenuContainer = styled.div`
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;

  @media screen and ${breakpoint('min-width', 'tabletM')} {
    width: auto;
  }
`

const MobileHeaderMenu: FunctionComponent = () => {
  const [activeMobileMenu, setActiveMobileMenu] = useState<null | string>(null)
  const width = useWindowWidth()

  // Prevent the main app body scrolling in the background
  // Be sure to include document.body to prevent annoying scroll jumps on iOS keyboard open/close
  useEffect(() => {
    if (activeMobileMenu) {
      document.documentElement.style.overflow = 'hidden'
      document.body.style.overflow = 'hidden'
    } else {
      document.documentElement.style.overflow = 'scroll'
      document.body.style.overflow = 'scroll'
    }
  }, [activeMobileMenu])

  // Fix any scroll changes if the user resizes the window while the menu is open
  useEffect(() => {
    if (!activeMobileMenu) {
      return
    }

    // 768px is laptopM
    if (width > 1200) {
      document.documentElement.style.overflow = 'scroll'
      document.body.style.overflow = 'scroll'
    } else {
      // If the user resized from mobile -> desktop with the menu active and then scrolls down before
      // resizing back to mobile, we need to reset the scroll otherwise the menu displays without the
      // primary header so the user cannot close the menu
      document.body.scroll(0, 0)

      document.documentElement.style.overflow = 'hidden'
      document.body.style.overflow = 'hidden'
    }
  }, [width])

  return (<commit_msg>Fix for mobile menu introducing scroll bars (#5430)<commit_after>import { breakpoint, Hidden } from '@amsterdam/asc-ui'
import type { FunctionComponent } from 'react'
import { useEffect, useState } from 'react'
import styled from 'styled-components'
import { HeaderSearchProvider } from '../../contexts/HeaderSearch/HeaderSearchContext'
import MobileHeaderNav from './MobileHeaderNav'
import MobileHeaderSearch from './MobileHeaderSearch'
import useWindowWidth from '../../hooks/useWindowWidth/useWindowWidth'

const StyledMobileMenuContainer = styled.div`
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;

  @media screen and ${breakpoint('min-width', 'tabletM')} {
    width: auto;
  }
`

const MobileHeaderMenu: FunctionComponent = () => {
  const [activeMobileMenu, setActiveMobileMenu] = useState<null | string>(null)
  const width = useWindowWidth()

  // Prevent the main app body scrolling in the background
  // Be sure to include document.body to prevent annoying scroll jumps on iOS keyboard open/close
  useEffect(() => {
    if (activeMobileMenu) {
      document.documentElement.style.overflow = 'hidden'
      document.body.style.overflow = 'hidden'
    } else {
      document.documentElement.style.overflow = 'auto'
      document.body.style.overflow = 'auto'
    }
  }, [activeMobileMenu])

  // Fix any scroll changes if the user resizes the window while the menu is open
  useEffect(() => {
    if (!activeMobileMenu) {
      return
    }

    // 768px is laptopM
    if (width > 1200) {
      document.documentElement.style.overflow = 'auto'
      document.body.style.overflow = 'auto'
    } else {
      // If the user resized from mobile -> desktop with the menu active and then scrolls down before
      // resizing back to mobile, we need to reset the scroll otherwise the menu displays without the
      // primary header so the user cannot close the menu
      document.body.scroll(0, 0)

      document.documentElement.style.overflow = 'hidden'
      document.body.style.overflow = 'hidden'
    }
  }, [width])

  return (
{'fraction_non_alphanumeric': 0.10591371788657296, 'fraction_numerical': 0.008240426563257392, 'mean_word_length': 3.4568034557235423, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6433184', 'n_tokens_mistral': 1160, 'n_tokens_neox': 1116, 'n_words': 367}