fix: conditionally render search bar based on page state

deltaDAO · Dec 3, 2024 · c6ac929 · c6ac929
1 parent 6748995
commit c6ac929
Showing 1 changed file with 25 additions and 19 deletions.
diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
@@ -102,24 +102,30 @@ export default function SearchBar({
   })
 
   return (
-    <form className={styles.search} autoComplete={!value ? 'off' : 'on'}>
-      <animated.div style={springStile} className={styles.springContainer}>
-        <InputElement
-          ref={searchBarRef}
-          type="search"
-          name="search"
-          placeholder={placeholder || 'Search...'}
-          value={value}
-          onChange={handleChange}
-          required
-          size="small"
-          className={styles.input}
-          onKeyPress={handleKeyPress}
-        />
-        <button onClick={handleButtonClick} className={styles.button}>
-          <SearchIcon className={styles.searchIcon} />
-        </button>
-      </animated.div>
-    </form>
+    <>
+      {isSearchPage || isSearchBarVisible ? (
+        <form className={styles.search} autoComplete={!value ? 'off' : 'on'}>
+          <animated.div style={springStile} className={styles.springContainer}>
+            <InputElement
+              ref={searchBarRef}
+              type="search"
+              name="search"
+              placeholder={placeholder || 'Search...'}
+              value={value}
+              onChange={handleChange}
+              required
+              size="small"
+              className={styles.input}
+              onKeyPress={handleKeyPress}
+            />
+            <button onClick={handleButtonClick} className={styles.button}>
+              <SearchIcon className={styles.searchIcon} />
+            </button>
+          </animated.div>
+        </form>
+      ) : (
+        <> </>
+      )}
+    </>
   )
 }