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"

frontend/src/app/components/searchbar/styles.module.css

@@ -1,21 +1,36 @@
 .searchBarContainer {
   display: flex;
-  width: 260px;
-  justify-content: space-between;
-  padding: 6px 6px 6px 12px;
-
   align-items: center;
+  justify-content: space-between;
+  width: 40px; /*collapse width*/
   border-radius: 6px;
-  border: 1px solid #31324a;
+  padding: 6px;
-
+  height: auto;
-  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
+  overflow: hidden;
+  transition: width 0.35s ease;
+  position: absolute;
 }
-.searchBarContainer > .input {
+
-  background-color: red;
+.searchBarContainer:focus-within {
+  background: #292a36;
+  background: color(display-p3 0.1608 0.1647 0.2078);
+}
+/* When the searchbar is opened */
+.open {
+  width: 260px;
+  padding: 6px 6px 6px 12px;
+  justify-content: space-between;
+  border: 1px solid #31324a;
+  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
+  border-radius: 6px;
+}
+.input {
+  background: transparent;
   outline: none;
   border: none;
   width: 100%;
-
+  opacity: 0; /*hide input kung collapse*/
+  transition: opacity 0.35s ease;
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
@@ -27,6 +42,11 @@
   caret-color: #575bc7;
 }
 
+.open > .input {
+  opacity: 1; /*show input when open*/
+  transition-delay: 0.1s;
+}
+
 .input::placeholder {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
@@ -39,8 +59,13 @@
   letter-spacing: -0.09px;
 }
 
-.icon {
+.searchBtn {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
+  color: #858699;
+}
+.searchBtn:hover {
+  color: #959aff;
 }

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -20,6 +20,7 @@ import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
 import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
 import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
+import SearchBar from "../searchbar/SearchBar";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -51,7 +52,7 @@ const TopHeader = (props) => {
         <div className={styles.actionBar}>
           {props?.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
-              <SearchIcon />
+              <SearchBar />
             </div>
           )}
           {props?.requiredButtons.includes("env") && (

frontend/src/app/components/topHeader/styles.module.css

@@ -6,6 +6,7 @@
   align-self: stretch;
   background: #21232f;
   transition: all 0.15s;
+  position: relative;
 }
 .title {
   display: flex;