src/App.css

@@ -9,4 +9,26 @@
 
 .btn-active {
   background: #D10056;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 300px;
+  /* Adjust the width as needed */
+  height: 100vh;
+  background-color: #fff;
+  /* Set the background color */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  /* Add a box-shadow for visual separation */
+  transform: translateX(-100%);
+  /* Initially hide the sidebar */
+  transition: transform 0.3s ease-in-out;
+  /* Add a transition for smooth animation */
+}
+
+.sidebar.open {
+  transform: translateX(0);
+  /* Show the sidebar by removing the translation */
 }

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]"

src/components/Header/Sidebar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Sidebar = ({
+  toggleSidebar,
+  isSidebarOpen
+}: {
+  toggleSidebar: () => void;
+  isSidebarOpen: boolean;
+  children?: ReactNode;
+}) => {
+  return (
+    <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
+      {/* Sidebar content goes here */}
+      <button onClick={toggleSidebar}>Close Sidebar</button>
+    </div>
+  );
+};
+
+export default Sidebar

src/components/Header/TopHeader.tsx

@@ -5,19 +5,25 @@ const TopHeader = () => {
   return (
     <>
       <div className="flex flex-col sm:hidden bg-[#5c2684]">
-        <ul className="flex flex-col justify-center items-center py-[0.4rem] text-[13px] font-light">
+        <ul className="flex flex-col justify-center items-center pt-[0.4rem] text-[13px] font-light">
           {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
-            <li key={text}>
-              <a href="#" className={`p-[10px] cursor-pointer text-white`}>
+            <li key={text} className="w-full"> 
+              <a href="#" className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}>
                 {text}
               </a>
             </li>
           ))}
+          <li className="w-full flex items-center justify-center">
+              <a href="#" className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}>
+              <p className="uppercase">Today's Share price:</p>
+            <span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
+              </a>
+            </li>
         </ul>
       </div>
       <div className={styles.top_header}>
         <div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
-          <ul className="flex items-center py-[0.4rem]">
+          <ul className="flex items-center py-[0.4rem] flex-wrap">
             {top_header_data.map(({ id, name }) => (
               <li key={id}>
                 <a href="#" className={`py-[11px] px-[15px]`}>