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

components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx

@@ -0,0 +1,63 @@
+import { useIntl } from "react-intl"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import { ChevronLeftIcon } from "@/components/Icons"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./languageSwitcherContainer.module.css"
+
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
+import {
+  type LanguageSwitcherContainerProps,
+  LanguageSwitcherTypesEnum,
+} from "@/types/components/languageSwitcher/languageSwitcher"
+
+export default function LanguageSwitcherContainer({
+  children,
+  type,
+}: LanguageSwitcherContainerProps) {
+  const { toggleDropdown } = useDropdownStore()
+  const intl = useIntl()
+  const isFooter = type === LanguageSwitcherTypesEnum.Footer
+  const isMobileHeader = type === LanguageSwitcherTypesEnum.MobileHeader
+  const position = isFooter
+    ? DropdownTypeEnum.FooterLanguageSwitcher
+    : DropdownTypeEnum.HamburgerMenu
+
+  return (
+    <div>
+      {isMobileHeader ? (
+        <div className={styles.backWrapper}>
+          <button
+            type="button"
+            className={styles.backButton}
+            onClick={() => toggleDropdown(position)}
+          >
+            <ChevronLeftIcon color="red" />
+            <Subtitle type="one">
+              {intl.formatMessage({
+                id: "Main menu",
+              })}
+            </Subtitle>
+          </button>
+        </div>
+      ) : null}
+      {isFooter ? (
+        <div className={styles.closeWrapper}>
+          <button
+            type="button"
+            className={styles.closeButton}
+            aria-label={intl.formatMessage({
+              id: "Close menu",
+            })}
+            onClick={() => toggleDropdown(position)}
+          >
+            <span className={styles.bar}></span>
+          </button>
+        </div>
+      ) : null}
+      {children}
+    </div>
+  )
+}