Merge pull request #68 from apsinghdev/fix/hide-menu-on-click

fix: hide menu when user click anywhere in canvas

Author: apsinghdev

client/src/App.jsx

@@ -250,6 +250,17 @@ function App() {
     }
   }, []);
 
+  // Hook to hide the menu when user click elsewhere on the screen
+  useEffect(() => {
+    const canvas = document.getElementById("canvas");
+    canvas.addEventListener("click", () => {
+      console.log("clicked");
+      if (showMenu) {
+        setShowMenu(false);
+      }
+    })
+  }, [showMenu]);
+
   return (
     <div id="container">
       <Sidebar

client/src/components/Canvas.jsx

@@ -11,6 +11,7 @@ function Canvas(props){
           className="h-full w-86vw"
           style={{backgroundColor: `${canvasColor}`}}
           ref={props.canvasRef}
+          id="canvas"
         ></canvas>
         {props.showMenu && <Menu></Menu>}
       </div>