Merge pull request #18 from apsinghdev/Feat/options-component

Feat/options component

Author: apsinghdev

client/src/App.css

@@ -3,59 +3,12 @@
     width: 100vw;
   }
 
-/* #sidebar * {
-    margin-bottom: 6px;
-  } */
-  
-  /* #sidebar h1 {
-    margin-top: '20px';
-    background: #7F7FD5;
-    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
-    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  } */
-  
-  #linewidth{
-    margin-top: 10px !important; 
-  }
-
  #container{
     height: 100%;
     display: flex;
     width: 100%;
  }
 
- /* #sidebar{
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-    width: 250px;
-    background-color: #202020;
-    padding-left: 15px;
- } */
-  .input-container {
-    display: block;
-    margin-top: 40px;
-  }
-  
-  .input-container label {
-    display: block;
-    color: white;
-  }
-  
-  .input-container input {
-    display: block;
-    width: 60%;
-  }
-  
-  #clear {
-    display: block;
-    width: 60%;
-    margin-top: 20px;
-  }
-
 
 
 

client/src/App.jsx

@@ -1,17 +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 Header from "./components/Header";
-import Toolbar from "./components/Toolbar";
-import Socials from "./components/Socials";
-import LoginAndLogout from "./components/LoginAndLogout";
 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'
@@ -124,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 rounded-xl bg-gradient-to-r from-slate-900 to-slate-700 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/MenuItem.jsx

@@ -1,10 +1,12 @@
 /* eslint-disable react/prop-types */
 function MenuItem(props){
-    return(
-        <div>
-            <h1>{props.feat}</h1>
-        </div>
-    )
+    return (
+      <div className="h-11 w-15 border-b border-dotted cursor-pointer content-center">
+        <h1 className="font-sans text-white justify-center flex">
+          {props.feat}
+        </h1>
+      </div>
+    );
 }
 
 export default MenuItem;

client/src/components/Sidebar.jsx

@@ -5,8 +5,11 @@ import LoginAndLogout from "./LoginAndLogout";
 
 function Sidebar(props){
     return (
-      <div className="flex flex-col w-64 bg-zinc-800 relative" ref={props.ref}>
-        <Header></Header>
+      <div
+        className="flex flex-col w-64 bg-gradient-to-r from-slate-900 to-slate-700 relative"
+        ref={props.ref}
+      >
+        <Header toggleMenu={props.toggleMenu}></Header>
         <Toolbar clearOnClick={props.clearOnClick} id={props.id}></Toolbar>
         <LoginAndLogout></LoginAndLogout>
       </div>

client/src/components/Socials.jsx

@@ -15,7 +15,7 @@ function Socials(){
       </h1>
       <img
         src={Xlogo}
-        className="h-6 w-6 rounded cursor-pointer"
+        className="h-5 w-5 rounded cursor-pointer"
         onClick={clickHandler}
       ></img>
     </div>