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 } })