feat(SW-378): Added close button to footer language switcher and made it slide up from below

components/LanguageSwitcher/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { languages } from "@/constants/languages"
@@ -9,13 +10,17 @@ import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
+import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
 import { languageSwitcherVariants } from "./variants"
 
 import styles from "./languageSwitcher.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
-import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
+import {
+  type LanguageSwitcherProps,
+  LanguageSwitcherTypesEnum,
+} from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcher({
   urls,
@@ -30,8 +35,11 @@ export default function LanguageSwitcher({
     isHeaderLanguageSwitcherMobileOpen,
   } = useDropdownStore()
 
-  const position = type === "footer" ? "footer" : "header"
-  const color = type === "footer" ? "pale" : "burgundy"
+  const isFooter = type === LanguageSwitcherTypesEnum.Footer
+  const isHeader = !isFooter
+
+  const position = isFooter ? "footer" : "header"
+  const color = isFooter ? "pale" : "burgundy"
 
   const dropdownType = {
     footer: DropdownTypeEnum.FooterLanguageSwitcher,
@@ -40,8 +48,8 @@ export default function LanguageSwitcher({
   }[type]
 
   const isLanguageSwitcherOpen =
-    (type === "footer" && isFooterLanguageSwitcherOpen) ||
-    (type !== "footer" &&
+    (isFooter && isFooterLanguageSwitcherOpen) ||
+    (isHeader &&
       (isHeaderLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen))
 
   useHandleKeyUp((event: KeyboardEvent) => {
@@ -50,6 +58,18 @@ export default function LanguageSwitcher({
     }
   })
 
+  useEffect(() => {
+    if (isFooter && isFooterLanguageSwitcherOpen) {
+      document.body.style.overflow = "hidden"
+    } else {
+      document.body.style.overflow = ""
+    }
+
+    return () => {
+      document.body.style.overflow = ""
+    }
+  }, [isFooter, isFooterLanguageSwitcherOpen])
+
   const classNames = languageSwitcherVariants({ color, position })
 
   return (
@@ -78,7 +98,9 @@ export default function LanguageSwitcher({
         className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
         {isLanguageSwitcherOpen ? (
-          <LanguageSwitcherContent urls={urls} type={type} />
+          <LanguageSwitcherContainer type={type}>
+            <LanguageSwitcherContent urls={urls} />
+          </LanguageSwitcherContainer>
         ) : null}
       </div>
     </div>