implement Menu component

Author: apsinghdev

client/src/components/Menu.jsx

@@ -3,7 +3,7 @@ import Socials from "./Socials";
 
 function Menu(){
     return (
-      <div className="w-52 h-56 bg-green-500 absolute left-52 top-8 rounded-lg shadow-xl">
+      <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,7 +5,10 @@ import LoginAndLogout from "./LoginAndLogout";
 
 function Sidebar(props){
     return (
-      <div className="flex flex-col w-64 bg-zinc-800 relative" ref={props.ref}>
+      <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>

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>