Merge in fix/SW-398-smooth-scroll (pull request #593)

fix(sw-398): moved logic for disable scroll in mobile and fixed issue that page is scrolling when toggling languageswitcher

components/LanguageSwitcher/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { languages } from "@/constants/languages"
@@ -28,12 +27,16 @@ export default function LanguageSwitcher({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const {
-    toggleDropdown,
-    isFooterLanguageSwitcherOpen,
-    isHeaderLanguageSwitcherOpen,
-    isHeaderLanguageSwitcherMobileOpen,
-  } = useDropdownStore()
+  const toggleDropdown = useDropdownStore((state) => state.toggleDropdown)
+  const isFooterLanguageSwitcherOpen = useDropdownStore(
+    (state) => state.isFooterLanguageSwitcherOpen
+  )
+  const isHeaderLanguageSwitcherOpen = useDropdownStore(
+    (state) => state.isHeaderLanguageSwitcherOpen
+  )
+  const isHeaderLanguageSwitcherMobileOpen = useDropdownStore(
+    (state) => state.isHeaderLanguageSwitcherMobileOpen
+  )
 
   const isFooter = type === LanguageSwitcherTypesEnum.Footer
   const isHeader = !isFooter
@@ -58,17 +61,14 @@ export default function LanguageSwitcher({
     }
   })
 
-  useEffect(() => {
-    if (isFooter && isFooterLanguageSwitcherOpen) {
-      document.body.style.overflow = "hidden"
-    } else {
-      document.body.style.overflow = ""
-    }
+  function handleClick() {
+    const scrollPosition = window.scrollY
+    toggleDropdown(dropdownType)
 
-    return () => {
-      document.body.style.overflow = ""
-    }
-  }, [isFooter, isFooterLanguageSwitcherOpen])
+    requestAnimationFrame(() => {
+      window.scrollTo(0, scrollPosition)
+    })
+  }
 
   const classNames = languageSwitcherVariants({ color, position })
 
@@ -82,7 +82,7 @@ export default function LanguageSwitcher({
             ? "Close language menu"
             : "Open language menu",
         })}
-        onClick={() => toggleDropdown(dropdownType)}
+        onClick={handleClick}
       >
         <GlobeIcon width={20} height={20} color={color} />
         <span>{languages[currentLanguage]}</span>