From d2f317106903e6a0d705fb4c38f3269455a859f6 Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Sun, 24 Mar 2024 23:48:40 -0700
Subject: [PATCH] Remove mobile action menu

---
 src/App.tsx       | 17 ++++++++++++-----
 src/css/style.css | 17 +++++++++++++++--
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c625515..5fd3a02 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,15 +16,15 @@ const components: TLUiComponents = {
 	PageMenu: null,
 	NavigationPanel: null,
 	DebugMenu: null,
+	ContextMenu: null,
+	ActionsMenu: null,
+	QuickActions: null,
+	MainMenu: null,
 	MenuPanel: null,
-	// ContextMenu: null,
-	// ActionsMenu: null,
 	// ZoomMenu: null,
-	// MainMenu: null,
 	// Minimap: null,
 	// Toolbar: null,
 	// KeyboardShortcutsDialog: null,
-	// QuickActions: null,
 	// HelperButtons: null,
 	// SharePanel: null,
 	// TopPanel: null,
@@ -33,6 +33,7 @@ const components: TLUiComponents = {
 function App() {
 	const [isPhysicsEnabled, setIsPhysicsEnabled] = useState(false);
 	const [elementsInfo, setElementsInfo] = useState<any[]>([]);
+	const [fadeClass, setFadeClass] = useState(''); // State to control the fade class
 
 	useEffect(() => {
 		const togglePhysics = async () => {
@@ -40,9 +41,12 @@ function App() {
 				const info = await gatherElementsInfo();
 				setElementsInfo(info);
 				setIsPhysicsEnabled(true); // Enable physics only after gathering info
+				setFadeClass('fade-out'); // Start fading out the Default component
+				// setTimeout(() => setFadeClass('fade-in'), 500); // Wait for fade-out to complete before fading in Canvas
 			} else {
 				setIsPhysicsEnabled(false);
 				setElementsInfo([]); // Reset elements info when disabling physics
+				setFadeClass(''); // Reset fade class to show Default component normally
 			}
 		};
 
@@ -107,7 +111,10 @@ function App() {
 		<React.StrictMode>
 			<HelmetProvider>
 				<Toggle />
-				{isPhysicsEnabled && elementsInfo.length > 0 ? <Canvas shapes={shapes} /> : <Default />}
+				<div style={{ zIndex: 999999 }} className={`default-component ${fadeClass}`}>
+					{<Default />}
+				</div>
+				{isPhysicsEnabled && elementsInfo.length > 0 ? <Canvas shapes={shapes} /> : null}
 			</HelmetProvider>
 		</React.StrictMode>
 	);
diff --git a/src/css/style.css b/src/css/style.css
index 392858f..57a84cb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -4,7 +4,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  overscroll-behavior: none;
   touch-action: none;
   min-height: 100vh;
   min-height: -webkit-fill-available;
@@ -13,6 +12,7 @@ body {
 }
 
 .tldraw__editor {
+  overscroll-behavior: none;
   position: fixed;
   inset: 0px;
   overflow: hidden;
@@ -102,7 +102,7 @@ ul {
 }
 
 @media (max-width: 600px) {
-  body {
+  main {
     padding: 2em;
   }
   header {
@@ -131,3 +131,16 @@ ul {
     font-size: 1.1rem;
   }
 }
+
+.fade-out {
+  opacity: 0 !important;
+  transition: opacity 1s ease-in-out;
+  /* visibility: hidden; */
+  /* display: none; */
+}
+
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+  /* visibility: visible; */
+}