added sidebar component

src/components/Header/Header.tsx

@@ -2,22 +2,41 @@ import { useState, ChangeEvent } from "react";
 import Logo from "../../assets/icons/logo.svg";
 import Button from "../shared/Button";
 import { lowerMenuItems } from "../../utils/data";
+import Sidebar from "./Sidebar";
+import { Link } from "react-router-dom";
+
+type LowerMenuItem = {
+  id: string | number;
+  name: string;
+};
 
 const Header = () => {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
   };
 
+  const toggleSidebar = () => {
+    setIsSidebarOpen((prev) => !prev);
+  };
+
+  console.log(isSidebarOpen);
+
   return (
     <div className="relative my-2 flex items-center justify-center">
+      {isSidebarOpen && (
+        <Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
+      )}
       <div className="containerMode flex justify-between gap-1 xl:gap-8">
-        <img
-          src={Logo}
-          alt="Logo"
-          className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
-        />
+        <Link to="/">
+          <img
+            src={Logo}
+            alt="Logo"
+            className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
+          />
+        </Link>
         <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
           <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
             {["Open An Account", "Internet Banking", "Contact Us"].map(
@@ -41,6 +60,7 @@ const Header = () => {
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
               fill="currentColor"
+              onClick={toggleSidebar}
               className="w-6 h-6"
             >
               <path
@@ -51,7 +71,7 @@ const Header = () => {
             </svg>
           </div>
           <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
-            {lowerMenuItems.map((item) => (
+            {lowerMenuItems.map((item: LowerMenuItem) => (
               <li
                 key={item.id}
                 className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"