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 (