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

Update mobile search functionality to slide in from the right

Browse Source 
Modify the mobile search component to slide in from the right instead of the top, and add autofocus to the search input.

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/amXgzfS
This commit is contained in:
sebastjanartic 2025-08-28 19:46:46 +00:00
parent 67fd934269
commit 9ffc51b5d9
1 changed files with 6 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,19 +87,19 @@ export default function SearchHeader({
variant="ghost"
className="md:hidden text-bunny-light"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
data-testid="button-mobile-menu"
data-testid="button-mobile-search"
>
{isMobileMenuOpen ? <X className="text-xl" /> : <Menu className="text-xl" />}
<Search className="text-xl" />
</Button>
</div>
</div>
{/* Mobile Menu */}
{/* Mobile Search Menu */}
{isMobileMenuOpen && (
<div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
<div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-right-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 mb-4">
<div className="relative">
<Input
type="search"
placeholder="Search videos..."
@ -107,21 +107,10 @@ export default function SearchHeader({
onChange={(e) => handleSearchChange(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
data-testid="input-mobile-search"
autoFocus
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
{/* Mobile Navigation */}
<nav className="flex flex-col space-y-4">
<a
href="/"
className="text-bunny-light hover:text-bunny-blue transition-colors py-2 border-b border-white/10"
onClick={() => setIsMobileMenuOpen(false)}
data-testid="link-mobile-home"
>
Home
</a>
</nav>
</div>
</div>
)}