add a renderTopLeftUI to props

packages/excalidraw/components/LayerUI.tsx

@@ -91,6 +91,7 @@ interface LayerUIProps {
   onPenModeToggle: AppClassProperties["togglePenMode"];
   showExitZenModeBtn: boolean;
   langCode: Language["code"];
+  renderTopLeftUI?: ExcalidrawProps["renderTopLeftUI"];
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   UIOptions: AppProps["UIOptions"];
@@ -149,6 +150,7 @@ const LayerUI = ({
   onHandToolToggle,
   onPenModeToggle,
   showExitZenModeBtn,
+  renderTopLeftUI,
   renderTopRightUI,
   renderCustomStats,
   UIOptions,
@@ -584,6 +586,7 @@ const LayerUI = ({
           setAppState={setAppState}
           onHandToolToggle={onHandToolToggle}
           onPenModeToggle={onPenModeToggle}
+          renderTopLeftUI={renderTopLeftUI}
           renderTopRightUI={renderTopRightUI}
           renderSidebars={renderSidebars}
           renderWelcomeScreen={renderWelcomeScreen}

packages/excalidraw/components/MobileMenu.tsx

@@ -36,6 +36,10 @@ type MobileMenuProps = {
     isMobile: boolean,
     appState: UIAppState,
   ) => JSX.Element | null;
+  renderTopLeftUI?: (
+    isMobile: boolean,
+    appState: UIAppState,
+  ) => JSX.Element | null;
   renderSidebars: () => JSX.Element | null;
   renderWelcomeScreen: boolean;
   UIOptions: AppProps["UIOptions"];
@@ -48,7 +52,7 @@ export const MobileMenu = ({
   actionManager,
   setAppState,
   onHandToolToggle,
-
+  renderTopLeftUI,
   renderTopRightUI,
   renderSidebars,
   renderWelcomeScreen,
@@ -61,19 +65,20 @@ export const MobileMenu = ({
     DefaultSidebarTriggerTunnel,
   } = useTunnels();
   const renderAppTopBar = () => {
+    const topRightUI = renderTopRightUI?.(true, appState) ?? (
+      <DefaultSidebarTriggerTunnel.Out />
+    );
+    const topLeftUI = renderTopLeftUI?.(true, appState) ?? (
+      <MainMenuTunnel.Out />
+    );
+
     if (
       appState.viewModeEnabled ||
       appState.openDialog?.name === "elementLinkSelector"
     ) {
-      return (
-        <div className="App-toolbar-content">
-          <MainMenuTunnel.Out />
-        </div>
-      );
+      return <div className="App-toolbar-content">{topLeftUI}</div>;
     }
 
-    const topRightUI = renderTopRightUI?.(true, appState);
-
     return (
       <div
         className="App-toolbar-content"
@@ -83,8 +88,8 @@ export const MobileMenu = ({
           justifyContent: "space-between",
         }}
       >
-        <MainMenuTunnel.Out />
-        {topRightUI ? topRightUI : <DefaultSidebarTriggerTunnel.Out />}
+        {topLeftUI}
+        {topRightUI}
       </div>
     );
   };

packages/excalidraw/types.ts

@@ -571,6 +571,10 @@ export interface ExcalidrawProps {
     /** excludes the duplicated elements */
     prevElements: readonly ExcalidrawElement[],
   ) => ExcalidrawElement[] | void;
+  renderTopLeftUI?: (
+    isMobile: boolean,
+    appState: UIAppState,
+  ) => JSX.Element | null;
   renderTopRightUI?: (
     isMobile: boolean,
     appState: UIAppState,