sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile search experience with updated animation and icon

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-28 19:55:13 +00:00
parent c17c51c82c
commit 4cdad54178
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/search-header.tsx
View File

@ -89,14 +89,14 @@ export default function SearchHeader({
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
data-testid="button-mobile-search" data-testid="button-mobile-search"
> >
<Search className="text-xl" /> {isMobileMenuOpen ? <X className="text-xl" /> : <Search className="text-xl" />}
</Button> </Button>
</div> </div>
</div> </div>
{/* Mobile Search Menu */} {/* Mobile Search Menu */}
{isMobileMenuOpen && ( {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"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
{/* Mobile Search */} {/* Mobile Search */}
<div className="relative"> <div className="relative">