Implement position and size of the Menu

Author: apsinghdev

client/src/App.jsx

@@ -1,13 +1,21 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import "./App.css";
 import { io } from "socket.io-client";
 
 const socket = io("http://localhost:8000");
 
 import Sidebar from "./components/Sidebar";
 import Canvas from "./components/Canvas";
+import Menu from "./components/Menu";
 
 function App() {
+
+  const [showMenu, setShowMenu ] = useState(false);
+
+  function toggleMenu(){
+    setShowMenu(!showMenu);
+  }
+
   const canvasRef = useRef(null);
   const sidebarRef = useRef(null);
   let color = '#000000'
@@ -120,8 +128,10 @@ function App() {
         clearOnClick={clearOnClick}
         ref={sidebarRef}
         id="clear"
+        toggleMenu={toggleMenu}
       ></Sidebar>
       <Canvas canvasRef={canvasRef}></Canvas>
+      { showMenu && <Menu></Menu>}
     </div>
   );
 }

client/src/components/Canvas.jsx

@@ -1,11 +1,14 @@
 /* eslint-disable react/prop-types */
+import Menu from "./Menu";
+
 function Canvas(props){
     return (
       <div className="flex justify-center items-center h-full w-80vw overflow-hidden">
         <canvas
           className="h-full w-86vw bg-yellow-600"
           ref={props.canvasRef}
         ></canvas>
+        {props.showMenu && <Menu></Menu>}
       </div>
     );
 }

client/src/components/Header.jsx

@@ -1,13 +1,14 @@
+/* eslint-disable react/prop-types */
 import { FaBars } from "react-icons/fa";
 
-function Header() {
+function Header(props) {
   return (
     <div className="flex py-5 justify-around bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% w-full items-center">
       <h1 className="font-sans text-2xl antialiased font-extrabold text-white">
         drawRTC
       </h1>
       <div className="" id="options">
-        <FaBars size={25} />
+        <FaBars size={25} onClick={props.toggleMenu}/>
       </div>
     </div>
   );

client/src/components/Menu.jsx

@@ -3,7 +3,7 @@ import Socials from "./Socials";
 
 function Menu(){
     return (
-      <div className="w-20 h-auto bg-white z-100">
+      <div className="w-52 h-56 bg-green-500 absolute left-52 top-8 rounded-lg shadow-xl">
         <MenuItem feat="Start Collaboration"></MenuItem>
         <MenuItem feat="Start Chat"></MenuItem>
         <MenuItem feat="Save as pdf"></MenuItem>

client/src/components/Sidebar.jsx

@@ -6,7 +6,7 @@ import LoginAndLogout from "./LoginAndLogout";
 function Sidebar(props){
     return (
       <div className="flex flex-col w-64 bg-zinc-800 relative" ref={props.ref}>
-        <Header></Header>
+        <Header toggleMenu={props.toggleMenu}></Header>
         <Toolbar clearOnClick={props.clearOnClick} id={props.id}></Toolbar>
         <LoginAndLogout></LoginAndLogout>
       </div>