implement LoginandLogout component

Author: apsinghdev

client/src/App.jsx

@@ -7,6 +7,7 @@ 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";
 
 function App() {
   const canvasRef = useRef(null);
@@ -119,7 +120,7 @@ function App() {
     <div id="container" style={{ display: "flex" }}>
       <div
         id="sidebar"
-        className="flex flex-col w-64 bg-zinc-800"
+        className="flex flex-col w-64 bg-zinc-800 relative"
         ref={sidebarRef}
       >
         <Header></Header>
@@ -128,6 +129,7 @@ function App() {
         <button id="clear" onClick={clearOnClick}>
           Clear
         </button>
+        <LoginAndLogout></LoginAndLogout>
       </div>
       <div className="canvas-container">
         <canvas className="canvas" ref={canvasRef}></canvas>

client/src/assets/user-dp.jpg

@@ -0,0 +1,17 @@
+import UserDP from "../assets/user-dp.jpg";
+
+function LoginAndLogout() {
+  return (
+    <div className="flex py-3 rounded-lg justify-around mt-55 bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% w-full items-center bottom-0 absolute">
+      <h1 className="font-sans text-lg antialiased font-semibold text-white">
+        Ajeet
+      </h1>
+      <img
+        src={UserDP}
+        className="rounded-full object-cover h-8 w-8 ml-4"
+      ></img>
+    </div>
+  );
+}
+
+export default LoginAndLogout;