done expanding search

frontend/src/app/components/searchbar/SearchBar.jsx

@@ -1,9 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import searchBarStyle from "./styles.module.css";
 
 const SearchBar = () => {
+  const [open, setOpen] = useState(false);
+
   return (
-    <form className={searchBarStyle.searchBarContainer}>
+    <form
+      className={`${searchBarStyle.searchBarContainer} ${open ? searchBarStyle.open : ""}`}
+    >
       <input
         className={searchBarStyle.input}
         type="text"
@@ -11,7 +15,10 @@ const SearchBar = () => {
         id=""
         placeholder="Search"
       />
-      <div className={searchBarStyle.icon}>
+      <div
+        className={searchBarStyle.searchBtn}
+        onClick={() => setOpen((open) => !open)}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width={24}
@@ -21,7 +28,7 @@ const SearchBar = () => {
         >
           <path
             d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-            stroke="#858699"
+            stroke="currentColor"
             strokeWidth={1.5}
             strokeLinecap="round"
             strokeLinejoin="round"