diff --git a/app/globals.css b/app/globals.css index 0c84c08ec..531d007d5 100644 --- a/app/globals.css +++ b/app/globals.css @@ -105,6 +105,7 @@ --mobile-site-header-height: 70.047px; --max-width-navigation: 89.5rem; --main-menu-mobile-height: 75px; + --mobile-menu-overlay-z-index: 10; } * { diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx index 216bd7ac9..99498bd6f 100644 --- a/components/Header/MainMenu/MobileMenu/index.tsx +++ b/components/Header/MainMenu/MobileMenu/index.tsx @@ -47,9 +47,10 @@ export default function MobileMenu({ diff --git a/components/Header/MainMenu/MobileMenu/mobileMenu.module.css b/components/Header/MainMenu/MobileMenu/mobileMenu.module.css index da62ccfff..c1fd26990 100644 --- a/components/Header/MainMenu/MobileMenu/mobileMenu.module.css +++ b/components/Header/MainMenu/MobileMenu/mobileMenu.module.css @@ -72,6 +72,7 @@ width: 100%; background-color: var(--Base-Surface-Primary-light-Normal); transition: right 0.3s; + z-index: var(--mobile-menu-overlay-z-index); } .modal[data-entering] { diff --git a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx index 2a9f5dac7..b976c37eb 100644 --- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx +++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx @@ -35,6 +35,7 @@ export default function MyPagesMobileMenu({ diff --git a/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css b/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css index ba3a687c4..6b251ea49 100644 --- a/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css +++ b/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css @@ -16,6 +16,7 @@ width: 100%; background-color: var(--Base-Surface-Primary-light-Normal); transition: right 0.3s; + z-index: var(--mobile-menu-overlay-z-index); } .modal[data-entering] { diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx index 3ce22c53a..608c4c505 100644 --- a/components/Header/MainMenu/index.tsx +++ b/components/Header/MainMenu/index.tsx @@ -44,10 +44,16 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
- {user ? ( + {true ? ( <> - - + + ) : ( { - if (event.key === "Escape" && isLanguageSwitcherOpen) { - toggleLanguageSwitcher() - } - }) - return (
{variant === "mobileHeader" ? ( diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx index 04be38d0d..ed59a6511 100644 --- a/components/LanguageSwitcher/index.tsx +++ b/components/LanguageSwitcher/index.tsx @@ -6,6 +6,7 @@ import { languages } from "@/constants/languages" import useDropdownStore from "@/stores/main-menu" import { ChevronDownIcon, GlobeIcon } from "@/components/Icons" +import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import useLang from "@/hooks/useLang" import LanguageSwitcherContent from "./LanguageSwitcherContent" @@ -22,6 +23,12 @@ export default function LanguageSwitcher({ const currentLanguage = useLang() const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore() + useHandleKeyUp((event: KeyboardEvent) => { + if (event.key === "Escape" && isLanguageSwitcherOpen) { + toggleLanguageSwitcher() + } + }) + return (