feat(SW-187): simplify dropdown menu

components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -13,6 +13,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./languageSwitcherContent.module.css"
 
+import { DropdownType } from "@/types/components/dropdown/dropdown"
 import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcherContent({
@@ -21,10 +22,13 @@ export default function LanguageSwitcherContent({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const { toggleLanguageSwitcher } = useDropdownStore()
+  const { toggleDropdown } = useDropdownStore()
   const languageSwitcherRef = useTrapFocus()
   const urlKeys = Object.keys(urls) as Lang[]
-  const position = type === "footer" ? "footer" : "header"
+  const position =
+    type === "footer"
+      ? DropdownType.FooterLanguage
+      : DropdownType.HeaderLanguage
 
   return (
     <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
@@ -33,7 +37,7 @@ export default function LanguageSwitcherContent({
           <button
             type="button"
             className={styles.backButton}
-            onClick={() => toggleLanguageSwitcher(position)}
+            onClick={() => toggleDropdown(position)}
           >
             <ChevronLeftIcon color="red" />
             <Subtitle type="one">Main Menu</Subtitle>

components/LanguageSwitcher/index.tsx

@@ -14,6 +14,7 @@ import { languageSwitcherVariants } from "./variants"
 
 import styles from "./languageSwitcher.module.css"
 
+import { DropdownType } from "@/types/components/dropdown/dropdown"
 import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcher({
@@ -22,22 +23,23 @@ export default function LanguageSwitcher({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const {
-    toggleLanguageSwitcher,
-    isHeaderLanguageSwitcherOpen,
-    isFooterLanguageSwitcherOpen,
-  } = useDropdownStore()
+  const { toggleDropdown, openDropdown } = useDropdownStore()
 
   const position = type === "footer" ? "footer" : "header"
+  const dropdownType =
+    type === "footer"
+      ? DropdownType.FooterLanguage
+      : DropdownType.HeaderLanguage
   const color = type === "footer" ? "pale" : "burgundy"
+
   const isLanguageSwitcherOpen =
     type === "footer"
-      ? isFooterLanguageSwitcherOpen
-      : isHeaderLanguageSwitcherOpen
+      ? openDropdown === DropdownType.FooterLanguage
+      : openDropdown === DropdownType.HeaderLanguage
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isLanguageSwitcherOpen) {
-      toggleLanguageSwitcher(position)
+      toggleDropdown(dropdownType)
     }
   })
 
@@ -53,7 +55,7 @@ export default function LanguageSwitcher({
             ? "Close language menu"
             : "Open language menu",
         })}
-        onClick={() => toggleLanguageSwitcher(position)}
+        onClick={() => toggleDropdown(dropdownType)}
       >
         <GlobeIcon width={20} height={20} color={color} />
         <span>{languages[currentLanguage]}</span>