few changes, mobile searchbar not done

frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx

@@ -1,12 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 import SearchIcon from "../icons/search";
+
 const MobileSearchBar = (props) => {
+  const [open, setOpen] = useState(false);
   return (
-    <div className={styles.searchBarContainer}>
-      <input type="text" className={styles.searchBar} />
-      <SearchIcon className={styles.searchIcon} />
-    </div>
+    <form className={styles.searchBarContainer}>
+      <div
+        className={`${styles.searchBarWrapper} ${open ? styles.open : ""}`}
+        onClick={() => setOpen((open) => !open)}
+      >
+        <input type="text" placeholder="Search" className={styles.searchBar} />
+        <SearchIcon className={styles.searchIcon} />
+      </div>
+    </form>
   );
 };