fix(SW-184): using store for state-handling of menus

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import Link from "next/link"
-import { useState } from "react"
 
 import { Lang, languages } from "@/constants/languages"
+import useDropdownStore from "@/stores/main-menu"
 
 import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
@@ -16,28 +16,24 @@ import { LanguageSwitcherProps } from "@/types/components/current/languageSwitch
 
 export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
   const currentLanguage = useLang()
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  function toggleExpand() {
-    setIsExpanded((prev) => !prev)
-  }
+  const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
 
   const urlKeys = Object.keys(urls) as Lang[]
 
   return (
     <div className={styles.languageSwitcher}>
-      <TopMenuButton onClick={toggleExpand}>
+      <TopMenuButton onClick={toggleLanguageSwitcher}>
         <GlobeIcon width={20} height={20} color="burgundy" />
         <span>{languages[currentLanguage]}</span>
         <ChevronDownIcon
-          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
           color="burgundy"
         />
       </TopMenuButton>
       <div
-        className={`${styles.dropdown} ${isExpanded ? styles.isExpanded : ""}`}
+        className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
         <ul className={styles.list}>
           {urlKeys.map((key) => {

components/Header/TopMenu/topMenu.module.css

@@ -5,8 +5,7 @@
 }
 
 .content {
-  position: relative;
-  max-width: 89.5rem;
+  max-width: var(--max-width-navigation);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;