From 4cdad54178100b1ab139816cb47b86e967c3aa44 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 19:55:13 +0000
Subject: [PATCH] Improve mobile search experience with updated animation and
 icon

Update the mobile search component in client/src/components/search-header.tsx to use a slide-in-from-top animation and toggle the search icon to an X icon when the mobile menu is open.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/FYWyElj
---
 client/src/components/search-header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index ae50622..3399965 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -89,14 +89,14 @@ export default function SearchHeader({
             onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             data-testid="button-mobile-search"
           >
-            <Search className="text-xl" />
+            {isMobileMenuOpen ? <X className="text-xl" /> : <Search className="text-xl" />}
           </Button>
         </div>
       </div>
 
       {/* Mobile Search Menu */}
       {isMobileMenuOpen && (
-        <div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-right-2 duration-200">
+        <div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
             {/* Mobile Search */}
             <div className="relative">