From 8f8b6e71449a75922b9a5b1084a9c627f6a8f1ae Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Wed, 26 Apr 2023 14:28:22 +0200
Subject: [PATCH] Add backdrop under mainmenu on mobile.

---
 package.json                          |  1 +
 src/components/main-menu/MainMenu.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/package.json b/package.json
index 0f2fe12f3..63805288d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@dwelle/tunnel-rat": "0.1.1",
     "@radix-ui/react-dropdown-menu": "2.0.4",
+    "@radix-ui/react-portal": "1.0.2",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index d8ccf5856..eb3567bc8 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -16,6 +16,8 @@ import { composeEventHandlers } from "../../utils";
 import { useTunnels } from "../context/tunnels";
 import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
 
+import * as Portal from "@radix-ui/react-portal";
+
 const MainMenu = Object.assign(
   withInternalFallback(
     "MainMenu",
@@ -39,6 +41,17 @@ const MainMenu = Object.assign(
 
       return (
         <mainMenuTunnel.In>
+          {appState.openMenu === "canvas" && device.isMobile && (
+            <Portal.Root
+              style={{
+                backgroundColor: "rgba(18, 18, 18, 0.2)",
+                position: "fixed",
+                inset: "0px",
+                zIndex: "var(--zIndex-layerUI)",
+              }}
+              onClick={() => setAppState({ openMenu: null })}
+            />
+          )}
           <DropdownMenu open={appState.openMenu === "canvas"}>
             <DropdownMenu.Trigger
               onToggle={() => {
@@ -50,6 +63,7 @@ const MainMenu = Object.assign(
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
+              // style={{ zIndex: 11 }}
               sideOffset={device.isMobile ? 20 : undefined}
               className="mainmenu-content"
               onClickOutside={onClickOutside}