From fb2975b0f24fa8ff1dbb9664e946603fe8c85e2e Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Fri, 12 Sep 2025 17:08:53 +1000
Subject: [PATCH] put menu trigger to top left

---
 packages/excalidraw/components/MobileMenu.tsx     | 15 +++++----------
 .../components/dropdownMenu/DropdownMenu.scss     | 12 ++++++++++++
 .../excalidraw/components/main-menu/MainMenu.tsx  |  2 ++
 packages/excalidraw/css/styles.scss               | 10 +---------
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx
index a03c5e38d..b27a2ad67 100644
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -107,29 +107,24 @@ export const MobileMenu = ({
     return (
       <div className="App-toolbar-content">
         <MainMenuTunnel.Out />
-        {actionManager.renderAction("toggleEditMenu")}
-        {actionManager.renderAction(
-          appState.multiElement ? "finalize" : "duplicateSelection",
-        )}
-        {actionManager.renderAction("deleteSelectedElements")}
-        <div>
-          {actionManager.renderAction("undo")}
-          {actionManager.renderAction("redo")}
-        </div>
+        {renderTopRightUI?.(true, appState)}
       </div>
     );
   };
 
   return (
     <>
-      {renderSidebars()}
+      {/* {renderSidebars()} */}
+
       <FixedSideContainer side="top" className="App-top-bar">
+        {renderAppToolbar()}
         <HintViewer
           appState={appState}
           isMobile={true}
           device={device}
           app={app}
         />
+        {renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
       </FixedSideContainer>
       <div
         className="App-bottom-bar"
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
index 185c832b5..eb6b5dff8 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
@@ -18,6 +18,18 @@
       width: 100%;
       row-gap: 0.75rem;
 
+      // When main menu is in the top toolbar, position relative to trigger
+      &.main-menu-dropdown {
+        position: fixed;
+        left: 1rem;
+        top: 3.5rem;
+        min-width: 280px;
+        max-width: calc(100vw - 2rem);
+        margin-top: 0;
+        margin-bottom: 0;
+        z-index: var(--zIndex-layerUI);
+      }
+
       .dropdown-menu-container {
         padding: 8px 8px;
         box-sizing: border-box;
diff --git a/packages/excalidraw/components/main-menu/MainMenu.tsx b/packages/excalidraw/components/main-menu/MainMenu.tsx
index 7c2b5fb4a..8ce2a5d69 100644
--- a/packages/excalidraw/components/main-menu/MainMenu.tsx
+++ b/packages/excalidraw/components/main-menu/MainMenu.tsx
@@ -53,6 +53,8 @@ const MainMenu = Object.assign(
               onSelect={composeEventHandlers(onSelect, () => {
                 setAppState({ openMenu: null });
               })}
+              placement="bottom"
+              className={device.editor.isMobile ? "main-menu-dropdown" : ""}
             >
               {children}
               {device.editor.isMobile && appState.collaborators.size > 0 && (
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 753f3d6b7..7b658bc03 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -235,7 +235,6 @@ body.excalidraw-cursor-resize * {
     z-index: var(--zIndex-layerUI);
     display: flex;
     flex-direction: column;
-    align-items: center;
   }
 
   .App-bottom-bar {
@@ -280,14 +279,7 @@ body.excalidraw-cursor-resize * {
 
   .App-toolbar-content {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-
-    .dropdown-menu--mobile {
-      bottom: 55px;
-      top: auto;
-    }
+    flex-direction: column;
   }
 
   .App-mobile-menu {