implement header component

Author: apsinghdev

client/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.0",
     "socket.io-client": "^4.7.4"
   },
   "devDependencies": {

client/package.json

@@ -3,19 +3,19 @@
     width: 100vw;
   }
 
-#sidebar * {
+/* #sidebar * {
     margin-bottom: 6px;
-  }
+  } */
 
-  #sidebar h1 {
+  /* #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; 

client/src/App.css

@@ -4,6 +4,8 @@ import { io } from "socket.io-client";
 
 const socket = io("http://localhost:8000");
 
+import Header from "./components/Header";
+
 function App() {
   const canvasRef = useRef(null);
   const sidebarRef = useRef(null);
@@ -115,9 +117,10 @@ function App() {
     <div id="container" style={{ display: "flex" }}>
       <div
         id="sidebar"
-        className="flex flex-col p-1 w-64 bg-gray-900 pl-4"
+        className="flex flex-col w-64 bg-gray-900"
         ref={sidebarRef}
       >
+        <Header></Header>
         <h1 id="drawRTC">drawRTC</h1>
         <div className="input-container" id="colorpicker">
           <label htmlFor="stroke">Stroke</label>

client/src/App.jsx

@@ -0,0 +1,16 @@
+import { FaBars } from "react-icons/fa";
+
+function Header() {
+  return (
+    <div className="flex border-b-2 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} />
+      </div>
+    </div>
+  );
+}
+
+export default Header;