fix: search icon bug (#4556)

src/components/NavBar/SearchBar.tsx

@@ -332,62 +332,64 @@ export const SearchBar = () => {
   const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
 
   return (
-    <Box position="relative">
-      <Box
-        position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
-        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
-        ref={searchRef}
-        className={styles.searchBarContainer}
-      >
-        <Row
-          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
-          borderRadius={isOpen ? undefined : '12'}
-          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
-          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-          borderBottomWidth={isOpen ? '0px' : '1px'}
-          display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
-          justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
-          onFocus={() => !isOpen && toggleOpen()}
-          onClick={() => !isOpen && toggleOpen()}
-          gap="12"
+    <>
+      <Box position="relative">
+        <Box
+          position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
+          width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
+          ref={searchRef}
+          className={styles.searchBarContainer}
         >
-          <Box display={{ sm: 'none', md: 'flex' }}>
-            <MagnifyingGlassIcon />
-          </Box>
-          <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
-            <ChevronLeftIcon />
+          <Row
+            className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
+            borderRadius={isOpen ? undefined : '12'}
+            borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
+            borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+            borderBottomWidth={isOpen ? '0px' : '1px'}
+            display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
+            justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
+            onFocus={() => !isOpen && toggleOpen()}
+            onClick={() => !isOpen && toggleOpen()}
+            gap="12"
+          >
+            <Box display={{ sm: 'none', md: 'flex' }}>
+              <MagnifyingGlassIcon />
+            </Box>
+            <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
+              <ChevronLeftIcon />
+            </Box>
+            <Box
+              as="input"
+              placeholder={placeholderText}
+              width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                !isOpen && toggleOpen()
+                setSearchValue(event.target.value)
+              }}
+              className={styles.searchBarInput}
+              value={searchValue}
+              ref={inputRef}
+            />
+          </Row>
+          <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
+            <NavIcon onClick={toggleOpen}>
+              <NavMagnifyingGlassIcon width={28} height={28} />
+            </NavIcon>
           </Box>
-          <Box
-            as="input"
-            placeholder={placeholderText}
-            width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              !isOpen && toggleOpen()
-              setSearchValue(event.target.value)
-            }}
-            className={styles.searchBarInput}
-            value={searchValue}
-            ref={inputRef}
-          />
-        </Row>
-        <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
-          <NavIcon onClick={toggleOpen}>
-            <NavMagnifyingGlassIcon width={28} height={28} />
-          </NavIcon>
+          {isOpen &&
+            (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
+              <SkeletonRow />
+            ) : (
+              <SearchBarDropdown
+                toggleOpen={toggleOpen}
+                tokens={reducedTokens}
+                collections={reducedCollections}
+                hasInput={debouncedSearchValue.length > 0}
+              />
+            ))}
         </Box>
-        {isOpen &&
-          (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
-            <SkeletonRow />
-          ) : (
-            <SearchBarDropdown
-              toggleOpen={toggleOpen}
-              tokens={reducedTokens}
-              collections={reducedCollections}
-              hasInput={debouncedSearchValue.length > 0}
-            />
-          ))}
       </Box>
       {isOpen && <Overlay />}
-    </Box>
+    </>
   )
 }