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

app/globals.css

@@ -123,6 +123,7 @@ html,
 body {
   margin: 0;
   padding: 0;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -130,6 +131,16 @@ body {
   overflow-x: hidden;
 }
 
+body.overflow-hidden {
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  body.overflow-hidden {
+    overflow: auto;
+    overflow-x: hidden;
+  }
+}
+
 ul {
   padding-inline-start: 0;
   margin-block-start: 0;

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 {
+  const toggleDropdown = useDropdownStore((state) => state.toggleDropdown)
-    toggleDropdown,
+  const isFooterLanguageSwitcherOpen = useDropdownStore(
-    isFooterLanguageSwitcherOpen,
+    (state) => state.isFooterLanguageSwitcherOpen
-    isHeaderLanguageSwitcherOpen,
+  )
-    isHeaderLanguageSwitcherMobileOpen,
+  const isHeaderLanguageSwitcherOpen = useDropdownStore(
-  } = 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(() => {
+  function handleClick() {
-    if (isFooter && isFooterLanguageSwitcherOpen) {
+    const scrollPosition = window.scrollY
-      document.body.style.overflow = "hidden"
+    toggleDropdown(dropdownType)
-    } else {
-      document.body.style.overflow = ""
-    }
 
-    return () => {
+    requestAnimationFrame(() => {
-      document.body.style.overflow = ""
+      window.scrollTo(0, scrollPosition)
-    }
+    })
-  }, [isFooter, isFooterLanguageSwitcherOpen])
+  }
 
   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>

server/trpc.ts

@@ -4,13 +4,13 @@ import { ZodError } from "zod"
 
 import { env } from "@/env/server"
 
-import { type Context, createContext } from "./context"
 import {
   badRequestError,
   internalServerError,
   sessionExpiredError,
   unauthorizedError,
 } from "./errors/trpc"
+import { type Context, createContext } from "./context"
 import { fetchServiceToken } from "./tokenManager"
 import { transformer } from "./transformer"
 

stores/main-menu.ts

@@ -85,6 +85,11 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
             state.isMyPagesMenuOpen = false
             state.isHeaderLanguageSwitcherOpen = false
             state.isHeaderLanguageSwitcherMobileOpen = false
+            if (state.isFooterLanguageSwitcherOpen) {
+              document.body.classList.add("overflow-hidden")
+            } else {
+              document.body.classList.remove("overflow-hidden")
+            }
             break
         }
       })