diff --git a/app/globals.css b/app/globals.css
index 67624cbcf..5ec453db0 100644
--- a/app/globals.css
+++ b/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;
diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx
index 7a5ecb6b2..3d0543051 100644
--- a/components/LanguageSwitcher/index.tsx
+++ b/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}
>
{languages[currentLanguage]}
diff --git a/server/trpc.ts b/server/trpc.ts
index 7a7a7f7ea..e3085f216 100644
--- a/server/trpc.ts
+++ b/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"
diff --git a/stores/main-menu.ts b/stores/main-menu.ts
index 29e039e99..4ccbcb290 100644
--- a/stores/main-menu.ts
+++ b/stores/main-menu.ts
@@ -85,6 +85,11 @@ const useDropdownStore = create((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
}
})