From c6ac929688b482120b1eaf7052ecf21520d389b2 Mon Sep 17 00:00:00 2001
From: KevinRohlf <123676073+KevinRohlf@users.noreply.github.com>
Date: Tue, 3 Dec 2024 10:31:51 +0100
Subject: [PATCH] fix: conditionally render search bar based on page state

---
 src/components/Header/SearchBar.tsx | 44 ++++++++++++++++-------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index 9d91b9339..0ecbcb456 100644
--- 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>
+      ) : (
+        <> </>
+      )}
+    </>
   )
 }