fix(SW-184): fixed implementation of useTrapFocus

components/Header/MainMenu/MobileMenu/index.tsx

@@ -21,7 +21,12 @@ export default function MobileMenu({
   languageUrls,
 }: MobileMenuProps) {
   const intl = useIntl()
-  const { isHamburgerMenuOpen, toggleHamburgerMenu } = useDropdownStore()
+  const {
+    isHamburgerMenuOpen,
+    isMyPagesMobileMenuOpen,
+    toggleHamburgerMenu,
+    toggleMyPagesMobileMenu,
+  } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isHamburgerMenuOpen) {
@@ -29,11 +34,19 @@ export default function MobileMenu({
     }
   })
 
+  function handleHamburgerClick() {
+    if (isMyPagesMobileMenuOpen) {
+      toggleMyPagesMobileMenu()
+    } else {
+      toggleHamburgerMenu()
+    }
+  }
+
   return (
     <>
       <button
         type="button"
-        className={`${styles.hamburger} ${isHamburgerMenuOpen ? styles.isExpanded : ""}`}
+        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
         aria-pressed="false"
         aria-label={intl.formatMessage({ id: "Menu" })}
         onClick={toggleHamburgerMenu}
@@ -59,7 +72,7 @@ export default function MobileMenu({
               <ServiceIcon width={20} height={20} color="burgundy" />
               {intl.formatMessage({ id: "Customer service" })}
             </HeaderLink>
-            <LanguageSwitcher urls={languageUrls} />
+            <LanguageSwitcher variant="mobileHeader" urls={languageUrls} />
           </footer>
         </Dialog>
       </Modal>

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -41,15 +41,15 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
           color="red"
         />
       </MainMenuButton>
-      <div
-        className={`${styles.dropdown} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
-      >
-        <MyPagesMenuContent
-          navigation={navigation}
-          user={user}
-          toggleOpenStateFn={toggleMyPagesMenu}
-        />
-      </div>
+      {isMyPagesMenuOpen ? (
+        <div className={styles.dropdown}>
+          <MyPagesMenuContent
+            navigation={navigation}
+            user={user}
+            toggleOpenStateFn={toggleMyPagesMenu}
+          />
+        </div>
+      ) : null}
     </div>
   )
 }

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -25,7 +25,6 @@
     box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
     min-width: 20rem;
     z-index: 1;
-    display: none;
   }
 
   /* Triangle above dropdown */