From 9ffc51b5d951f461a51227df8d612af6b0c9bd5a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 19:46:46 +0000
Subject: [PATCH] Update mobile search functionality to slide in from the right

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
---
 client/src/components/search-header.tsx | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 175977a..ae50622 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -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>
       )}