Refactor: Improve mobile header and navigation

src/components/search/MobileSearch.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Search, X } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { SearchResults } from './SearchResults';
+
+interface MobileSearchProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function MobileSearch({ open, onOpenChange }: MobileSearchProps) {
+  const [query, setQuery] = useState('');
+
+  const handleClose = () => {
+    setQuery('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="h-screen max-w-full p-0 gap-0 rounded-none">
+        <div className="flex flex-col h-full">
+          {/* Search Header */}
+          <div className="sticky top-0 z-10 bg-background border-b border-border p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleClose}
+                className="shrink-0"
+              >
+                <X className="h-5 w-5" />
+              </Button>
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                <Input
+                  autoFocus
+                  placeholder="Search parks, rides, manufacturers..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  className="pl-10 h-11 text-base"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Search Results */}
+          <div className="flex-1 overflow-auto">
+            {query.length >= 1 ? (
+              <SearchResults query={query} onClose={handleClose} />
+            ) : (
+              <div className="p-6 space-y-4">
+                <div className="text-center py-12">
+                  <Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                  <h3 className="text-lg font-semibold mb-2">Start searching</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Find parks, rides, and manufacturers
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}