src/App.css

@@ -15,16 +15,18 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 300px;
+  width: 330px;
   /* Adjust the width as needed */
   height: 100vh;
-  background-color: #fff;
+  background-color: #5c2684;
+  color: #FFFFFF;
+  padding-top: .9375rem;
   /* 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;
+  transition: transform 0.4s ease;
   /* Add a transition for smooth animation */
 
   z-index: 9;

src/components/Header/Header.tsx

@@ -55,11 +55,15 @@ const Header = () => {
           </ul>
           <div className="flex lg:hidden">
             <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              onClick={toggleSidebar}
-              className="w-6 h-6"
+             xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             strokeWidth="1"
+             strokeLinecap="round"
+             strokeLinejoin="round"
+             onClick={toggleSidebar}
+              className="w-6 h-6 stroke-[#A6368C]"
             >
               <path
                 fillRule="evenodd"