From 70d48d547207d0cd611ea2683731fe7676a1a0fc Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Fri, 21 Apr 2023 15:58:04 +0200
Subject: [PATCH] Make main menu full width on mobile again.

---
 src/components/dropdownMenu/DropdownMenu.scss      | 14 +++++---------
 .../dropdownMenu/DropdownMenuContent.tsx           |  3 +++
 .../dropdownMenu/DropdownMenuSubContent.tsx        |  7 ++++++-
 src/components/main-menu/MainMenu.tsx              |  9 ++++++---
 src/packages/excalidraw/example/App.tsx            |  4 ++--
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index cbdefa366..1a683ab42 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -3,6 +3,11 @@
 .excalidraw {
   [data-radix-popper-content-wrapper] {
     z-index: 1 !important;
+
+    @include isMobile {
+      width: 100%;
+      max-width: var(--radix-popper-available-width);
+    }
   }
 
   .dropdown-menu {
@@ -30,15 +35,6 @@
 
     &--mobile {
       max-width: none;
-      // bottom: 55px;
-      // top: auto;
-      // left: 0;
-      // // TODO barnabasmolnar/mainmenu-radix
-      // // double check rendering/styling on mobile
-      // // width: 100%;
-      // display: flex;
-      // flex-direction: column;
-      // row-gap: 0.75rem;
 
       .dropdown-menu-container {
         padding: 8px 8px;
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index d60ddd97e..ceac898db 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuContent.tsx
@@ -16,6 +16,7 @@ const MenuContent = ({
   onSelect,
   style,
   sideOffset,
+  collisionBoundary,
 }: {
   children?: React.ReactNode;
   onClickOutside?: () => void;
@@ -26,6 +27,7 @@ const MenuContent = ({
   onSelect?: (event: Event) => void;
   style?: React.CSSProperties;
   sideOffset?: number;
+  collisionBoundary?: Element | Element[] | null | undefined;
 }) => {
   const device = useDevice();
   const menuRef = useOutsideClickHook(() => {
@@ -39,6 +41,7 @@ const MenuContent = ({
   return (
     <DropdownMenuContentPropsContext.Provider value={{ onSelect }}>
       <DropdownMenuPrimitive.Content
+        collisionBoundary={collisionBoundary}
         ref={menuRef}
         className={classNames}
         style={style}
diff --git a/src/components/dropdownMenu/DropdownMenuSubContent.tsx b/src/components/dropdownMenu/DropdownMenuSubContent.tsx
index 665933e9a..1760e6e5c 100644
--- a/src/components/dropdownMenu/DropdownMenuSubContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuSubContent.tsx
@@ -7,9 +7,11 @@ import clsx from "clsx";
 const DropdownMenuSubContent = ({
   children,
   className,
+  sideOffset,
 }: {
   children?: React.ReactNode;
   className?: string;
+  sideOffset?: number;
 }) => {
   const device = useDevice();
 
@@ -18,7 +20,10 @@ const DropdownMenuSubContent = ({
   }).trim();
 
   return (
-    <DropdownMenuPrimitive.SubContent className={classNames}>
+    <DropdownMenuPrimitive.SubContent
+      className={classNames}
+      sideOffset={sideOffset}
+    >
       {device.isMobile ? (
         <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
       ) : (
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index d8ccf5856..efad1ced3 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -33,9 +33,7 @@ const MainMenu = Object.assign(
       const device = useDevice();
       const appState = useExcalidrawAppState();
       const setAppState = useExcalidrawSetAppState();
-      const onClickOutside = device.isMobile
-        ? undefined
-        : () => setAppState({ openMenu: null });
+      const onClickOutside = () => setAppState({ openMenu: null });
 
       return (
         <mainMenuTunnel.In>
@@ -50,6 +48,11 @@ const MainMenu = Object.assign(
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
+              collisionBoundary={
+                device.isMobile
+                  ? document.querySelector(".App-bottom-bar")
+                  : undefined
+              }
               sideOffset={device.isMobile ? 20 : undefined}
               className="mainmenu-content"
               onClickOutside={onClickOutside}
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index 24376aff6..6c5e43978 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -587,8 +587,8 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           </MainMenu.Sub.Content>
         </MainMenu.Sub>
         <MainMenu.Sub>
-          <MainMenu.Sub.Trigger>Trigger me</MainMenu.Sub.Trigger>
-          <MainMenu.Sub.Content>
+          <MainMenu.Sub.Trigger>Trigger me with offset</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Content sideOffset={-80}>
             <MainMenu.Sub>
               <MainMenu.Sub.Trigger>Trigger me inside</MainMenu.Sub.Trigger>
               <MainMenu.Sub.Content>