handle mobile

src/components/LayerUI.tsx

@@ -547,7 +547,9 @@ const LayerUI = ({
         onImageAction={onImageAction}
         renderTopRightUI={renderTopRightUI}
         renderStats={renderStats}
-      />
+      >
+        {children}
+      </MobileMenu>
     </>
   ) : (
     <>

src/components/MobileMenu.tsx

@@ -32,10 +32,7 @@ type MobileMenuProps = {
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
-  renderCustomFooter?: (
+
-    isMobile: boolean,
-    appState: AppState,
-  ) => JSX.Element | null;
   viewModeEnabled: boolean;
   showThemeBtn: boolean;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
@@ -44,6 +41,7 @@ type MobileMenuProps = {
     appState: AppState,
   ) => JSX.Element | null;
   renderStats: () => JSX.Element | null;
+  children?: React.ReactNode;
 };
 
 export const MobileMenu = ({
@@ -59,12 +57,12 @@ export const MobileMenu = ({
   onPenModeToggle,
   canvas,
   isCollaborating,
-  renderCustomFooter,
   viewModeEnabled,
   showThemeBtn,
   onImageAction,
   renderTopRightUI,
   renderStats,
+  children,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -201,7 +199,7 @@ export const MobileMenu = ({
               <div className="panelColumn">
                 <Stack.Col gap={4}>
                   {renderCanvasActions()}
-                  {renderCustomFooter?.(true, appState)}
+                  {children}
                   {appState.collaborators.size > 0 && (
                     <fieldset>
                       <legend>{t("labels.collaborators")}</legend>

src/excalidraw-app/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { isExcalidrawPlusSignedUser, PlusAppLinkJSX, PlusLPLinkJSX } from "..";
+import { useDevice } from "../../components/App";
 import { shield } from "../../components/icons";
 import { Tooltip } from "../../components/Tooltip";
 import { t } from "../../i18n";
@@ -20,15 +21,14 @@ const EncryptedIcon = () => (
 );
 
 const Footer = ({
-  isMobile,
   langCode,
   onLangChange,
 }: {
-  isMobile: boolean;
   langCode: string;
   onLangChange: (langCode: string) => void;
 }) => {
-  if (isMobile) {
+  const device = useDevice();
+  if (device.isMobile) {
     const isTinyDevice = window.innerWidth < 362;
     return (
       <div

src/excalidraw-app/index.tsx

@@ -645,7 +645,6 @@ const ExcalidrawWrapper = () => {
         autoFocus={true}
       >
         <Footer
-          isMobile={false}
           langCode={langCode}
           onLangChange={(langCode) => setLangCode(langCode)}
         />