Refactor: Hide sidebar when collapsed

src/components/parks/ParkFilters.tsx

@@ -82,16 +82,14 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
     return (propertyOwners || []).map(p => ({ label: p.name, value: p.id }));
   }, [propertyOwners]);
 
-  const parkTypes = [
-    { value: 'all', label: 'All Types' },
-    { value: 'theme_park', label: 'Theme Parks' },
-    { value: 'amusement_park', label: 'Amusement Parks' },
-    { value: 'water_park', label: 'Water Parks' },
+  const parkTypes: MultiSelectOption[] = [
+    { value: 'theme_park', label: 'Theme Park' },
+    { value: 'amusement_park', label: 'Amusement Park' },
+    { value: 'water_park', label: 'Water Park' },
     { value: 'family_entertainment', label: 'Family Entertainment' }
   ];
 
-  const statusOptions = [
-    { value: 'all', label: 'All Status' },
+  const statusOptions: MultiSelectOption[] = [
     { value: 'operating', label: 'Operating' },
     { value: 'seasonal', label: 'Seasonal' },
     { value: 'under_construction', label: 'Under Construction' },
@@ -113,9 +111,9 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
   const resetFilters = () => {
     onFiltersChange({
       search: '',
-      parkType: 'all',
-      status: 'all',
-      country: 'all',
+      parkType: [],
+      status: [],
+      country: [],
       states: [],
       cities: [],
       operators: [],
@@ -145,66 +143,29 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
 
       <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 gap-4">
-          {/* Park Type */}
-          <div className="space-y-2">
-            <Label>Park Type</Label>
-            <Select 
-              value={filters.parkType} 
-              onValueChange={(value) => onFiltersChange({ ...filters, parkType: value })}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {parkTypes.map(type => (
-                  <SelectItem key={type.value} value={type.value}>
-                    {type.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+          <FilterMultiSelectCombobox
+            label="Park Type"
+            options={parkTypes}
+            value={filters.parkType}
+            onChange={(value) => onFiltersChange({ ...filters, parkType: value })}
+            placeholder="Select park types"
+          />
 
-          {/* Status */}
-          <div className="space-y-2">
-            <Label>Status</Label>
-            <Select 
-              value={filters.status} 
-              onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {statusOptions.map(status => (
-                  <SelectItem key={status.value} value={status.value}>
-                    {status.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+          <FilterMultiSelectCombobox
+            label="Status"
+            options={statusOptions}
+            value={filters.status}
+            onChange={(value) => onFiltersChange({ ...filters, status: value })}
+            placeholder="Select status"
+          />
 
-          {/* Country */}
-          <div className="space-y-2">
-            <Label>Country</Label>
-            <Select 
-              value={filters.country} 
-              onValueChange={(value) => onFiltersChange({ ...filters, country: value })}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Countries</SelectItem>
-                {Array.from(new Set(locations?.map(l => l.country).filter(Boolean) || [])).sort().map(country => (
-                  <SelectItem key={country} value={country}>
-                    {country}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+          <FilterMultiSelectCombobox
+            label="Country"
+            options={countryOptions}
+            value={filters.country}
+            onChange={(value) => onFiltersChange({ ...filters, country: value })}
+            placeholder="Select countries"
+          />
 
           <FilterMultiSelectCombobox
             label="States/Provinces"

src/components/parks/ParkSortOptions.tsx

@@ -12,10 +12,10 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
   const sortOptions = [
     { value: 'name', label: 'Name' },
     { value: 'rating', label: 'Rating' },
-    { value: 'rides', label: 'Ride Count' },
-    { value: 'coasters', label: 'Coaster Count' },
-    { value: 'reviews', label: 'Review Count' },
-    { value: 'opening', label: 'Opening Date' },
+    { value: 'rides', label: 'Rides' },
+    { value: 'coasters', label: 'Coasters' },
+    { value: 'reviews', label: 'Reviews' },
+    { value: 'opening', label: 'Opening' },
   ];
 
   const toggleDirection = () => {
@@ -26,19 +26,19 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
   };
 
   return (
-    <div className="flex gap-2 flex-1">
+    <div className="flex gap-2">
       <Select 
         value={sort.field} 
         onValueChange={(field) => onSortChange({ ...sort, field })}
       >
-        <SelectTrigger className="flex-1 bg-muted/50 border-border/50">
+        <SelectTrigger className="w-[160px] bg-muted/50 border-border/50">
           <ArrowUpDown className="w-4 h-4 mr-2" />
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           {sortOptions.map(option => (
             <SelectItem key={option.value} value={option.value}>
-              Sort by {option.label}
+              {option.label}
             </SelectItem>
           ))}
         </SelectContent>

src/pages/Designers.tsx

@@ -6,9 +6,10 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
-import { Card, CardContent } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter } from 'lucide-react';
+import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { DesignerFilters, DesignerFilterState, defaultDesignerFilters } from '@/components/designers/DesignerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -33,6 +34,10 @@ export default function Designers() {
   const [filters, setFilters] = useState<DesignerFilterState>(defaultDesignerFilters);
   const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('designers-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
 
   const handleCreateSubmit = async (data: any) => {
     try {
@@ -52,6 +57,10 @@ export default function Designers() {
     fetchCompanies();
   }, [sortBy]);
 
+  useEffect(() => {
+    localStorage.setItem('designers-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
   const fetchCompanies = async () => {
     try {
       let query = supabase
@@ -140,6 +149,22 @@ export default function Designers() {
         {/* Search and Filters */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -152,18 +177,20 @@ export default function Designers() {
               </div>
             </div>
             
+            {/* Sort controls - more compact */}
             <div className="flex gap-2 w-full lg:w-auto">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px] h-10">
+                <SelectTrigger className="w-[160px] h-10">
                   <SlidersHorizontal className="h-4 w-4 mr-2" />
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
-                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
+                  <SelectItem value="founded">Founded</SelectItem>
                 </SelectContent>
               </Select>
               
+              {/* Mobile filter toggle */}
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
@@ -193,15 +220,28 @@ export default function Designers() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
-            <div className="sticky top-24">
-              <Card>
-                <CardContent className="pt-6">
-                  <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
-                </CardContent>
-              </Card>
-            </div>
-          </aside>
+          {!sidebarCollapsed && (
+            <aside className="hidden lg:block flex-shrink-0 transition-all duration-300 lg:w-[340px] xl:w-[380px] 2xl:w-[420px]">
+              <div className="sticky top-24">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-base">Filters</CardTitle>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSidebarCollapsed(true)}
+                      title="Hide filters"
+                    >
+                      <PanelLeftClose className="w-4 h-4" />
+                    </Button>
+                  </CardHeader>
+                  <CardContent>
+                    <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
+                  </CardContent>
+                </Card>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/Manufacturers.tsx

@@ -6,9 +6,10 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
-import { Card, CardContent } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { ManufacturerFilters, ManufacturerFilterState, defaultManufacturerFilters } from '@/components/manufacturers/ManufacturerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -33,12 +34,20 @@ export default function Manufacturers() {
   const [filters, setFilters] = useState<ManufacturerFilterState>(defaultManufacturerFilters);
   const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('manufacturers-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
   
 
   useEffect(() => {
     fetchCompanies();
   }, [sortBy]);
 
+  useEffect(() => {
+    localStorage.setItem('manufacturers-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
   const fetchCompanies = async () => {
     try {
       let query = supabase
@@ -153,6 +162,22 @@ export default function Manufacturers() {
         {/* Search and Filters */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -165,18 +190,20 @@ export default function Manufacturers() {
               </div>
             </div>
             
+            {/* Sort controls - more compact */}
             <div className="flex gap-2 w-full lg:w-auto">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px] h-10">
+                <SelectTrigger className="w-[160px] h-10">
                   <SlidersHorizontal className="h-4 w-4 mr-2" />
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
-                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
+                  <SelectItem value="founded">Founded</SelectItem>
                 </SelectContent>
               </Select>
               
+              {/* Mobile filter toggle */}
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
@@ -206,15 +233,28 @@ export default function Manufacturers() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
-            <div className="sticky top-24">
-              <Card>
-                <CardContent className="pt-6">
-                  <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
-                </CardContent>
-              </Card>
-            </div>
-          </aside>
+          {!sidebarCollapsed && (
+            <aside className="hidden lg:block flex-shrink-0 transition-all duration-300 lg:w-[340px] xl:w-[380px] 2xl:w-[420px]">
+              <div className="sticky top-24">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-base">Filters</CardTitle>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSidebarCollapsed(true)}
+                      title="Hide filters"
+                    >
+                      <PanelLeftClose className="w-4 h-4" />
+                    </Button>
+                  </CardHeader>
+                  <CardContent>
+                    <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
+                  </CardContent>
+                </Card>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/OperatorParks.tsx

@@ -18,9 +18,9 @@ import { FilterState, SortState } from './Parks';
 
 const initialFilters: FilterState = {
   search: '',
-  parkType: 'all',
-  status: 'all',
-  country: 'all',
+  parkType: [],
+  status: [],
+  country: [],
   minRating: 0,
   maxRating: 5,
   minRides: 0,
@@ -98,9 +98,9 @@ export default function OperatorParks() {
           park.location?.country?.toLowerCase().includes(searchTerm);
         if (!matchesSearch) return false;
       }
-      if (filters.parkType !== 'all' && park.park_type !== filters.parkType) return false;
-      if (filters.status !== 'all' && park.status !== filters.status) return false;
-      if (filters.country !== 'all' && park.location?.country !== filters.country) return false;
+      if (filters.parkType.length > 0 && !filters.parkType.includes(park.park_type)) return false;
+      if (filters.status.length > 0 && !filters.status.includes(park.status)) return false;
+      if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) return false;
       
       const rating = park.average_rating || 0;
       if (rating < filters.minRating || rating > filters.maxRating) return false;

src/pages/Operators.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '@/components/layout/Header';
@@ -8,8 +8,9 @@ import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
-import { Card, CardContent } from '@/components/ui/card';
-import { Search, Filter, Building, Plus, ChevronDown } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { supabase } from '@/integrations/supabase/client';
 import OperatorCard from '@/components/operators/OperatorCard';
 import { OperatorForm } from '@/components/admin/OperatorForm';
@@ -32,6 +33,14 @@ const Operators = () => {
   const [filters, setFilters] = useState<OperatorFilterState>(defaultOperatorFilters);
   const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('operators-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('operators-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
 
   const { data: operators, isLoading } = useQuery({
     queryKey: ['operators'],
@@ -210,6 +219,22 @@ const Operators = () => {
         {/* Search and Filters */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -222,19 +247,21 @@ const Operators = () => {
               </div>
             </div>
             
+            {/* Sort controls - more compact */}
             <div className="flex gap-2 w-full lg:w-auto">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px] h-10">
+                <SelectTrigger className="w-[160px] h-10">
                   <SelectValue placeholder="Sort by" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="name">Name</SelectItem>
                   <SelectItem value="rating">Rating</SelectItem>
-                  <SelectItem value="founded">Founded Year</SelectItem>
-                  <SelectItem value="reviews">Review Count</SelectItem>
+                  <SelectItem value="founded">Founded</SelectItem>
+                  <SelectItem value="reviews">Reviews</SelectItem>
                 </SelectContent>
               </Select>
 
+              {/* Mobile filter toggle */}
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
@@ -264,15 +291,28 @@ const Operators = () => {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
-            <div className="sticky top-24">
-              <Card>
-                <CardContent className="pt-6">
-                  <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
-                </CardContent>
-              </Card>
-            </div>
-          </aside>
+          {!sidebarCollapsed && (
+            <aside className="hidden lg:block flex-shrink-0 transition-all duration-300 lg:w-[340px] xl:w-[380px] 2xl:w-[420px]">
+              <div className="sticky top-24">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-base">Filters</CardTitle>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSidebarCollapsed(true)}
+                      title="Hide filters"
+                    >
+                      <PanelLeftClose className="w-4 h-4" />
+                    </Button>
+                  </CardHeader>
+                  <CardContent>
+                    <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
+                  </CardContent>
+                </Card>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/OwnerParks.tsx

@@ -18,9 +18,9 @@ import { FilterState, SortState } from './Parks';
 
 const initialFilters: FilterState = {
   search: '',
-  parkType: 'all',
-  status: 'all',
-  country: 'all',
+  parkType: [],
+  status: [],
+  country: [],
   minRating: 0,
   maxRating: 5,
   minRides: 0,
@@ -98,9 +98,9 @@ export default function OwnerParks() {
           park.location?.country?.toLowerCase().includes(searchTerm);
         if (!matchesSearch) return false;
       }
-      if (filters.parkType !== 'all' && park.park_type !== filters.parkType) return false;
-      if (filters.status !== 'all' && park.status !== filters.status) return false;
-      if (filters.country !== 'all' && park.location?.country !== filters.country) return false;
+      if (filters.parkType.length > 0 && !filters.parkType.includes(park.park_type)) return false;
+      if (filters.status.length > 0 && !filters.status.includes(park.status)) return false;
+      if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) return false;
       
       const rating = park.average_rating || 0;
       if (rating < filters.minRating || rating > filters.maxRating) return false;

src/pages/Parks.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -17,7 +18,9 @@ import {
   Sliders,
   X,
   FerrisWheel,
-  Plus
+  Plus,
+  PanelLeftClose,
+  PanelLeftOpen
 } from 'lucide-react';
 import { Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -36,9 +39,9 @@ import { useAuthModal } from '@/hooks/useAuthModal';
 
 export interface FilterState {
   search: string;
-  parkType: string;
-  status: string;
-  country: string;
+  parkType: string[];
+  status: string[];
+  country: string[];
   states?: string[];
   cities?: string[];
   operators?: string[];
@@ -62,9 +65,9 @@ export interface SortState {
 
 const initialFilters: FilterState = {
   search: '',
-  parkType: 'all',
-  status: 'all',
-  country: 'all',
+  parkType: [],
+  status: [],
+  country: [],
   states: [],
   cities: [],
   operators: [],
@@ -94,6 +97,10 @@ export default function Parks() {
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [showFilters, setShowFilters] = useState(false);
   const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('parks-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
   const navigate = useNavigate();
   const { toast } = useToast();
   const { user } = useAuth();
@@ -104,6 +111,10 @@ export default function Parks() {
     fetchParks();
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem('parks-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
   const fetchParks = async () => {
     try {
       setLoading(true);
@@ -147,17 +158,17 @@ export default function Parks() {
       }
 
       // Park type filter
-      if (filters.parkType !== 'all' && park.park_type !== filters.parkType) {
+      if (filters.parkType.length > 0 && !filters.parkType.includes(park.park_type)) {
         return false;
       }
 
       // Status filter
-      if (filters.status !== 'all' && park.status !== filters.status) {
+      if (filters.status.length > 0 && !filters.status.includes(park.status)) {
         return false;
       }
 
       // Country filter
-      if (filters.country !== 'all' && park.location?.country !== filters.country) {
+      if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) {
         return false;
       }
 
@@ -280,9 +291,9 @@ export default function Parks() {
   const activeFilterCount = useMemo(() => {
     let count = 0;
     if (filters.search) count++;
-    if (filters.parkType !== 'all') count++;
-    if (filters.status !== 'all') count++;
-    if (filters.country !== 'all') count++;
+    if (filters.parkType.length > 0) count++;
+    if (filters.status.length > 0) count++;
+    if (filters.country.length > 0) count++;
     if (filters.minRating > 0 || filters.maxRating < 5) count++;
     if (filters.minRides > 0 || filters.maxRides < 1000) count++;
     if (filters.openingYearStart || filters.openingYearEnd) count++;
@@ -395,6 +406,27 @@ export default function Parks() {
         {/* Search and Controls */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+              {activeFilterCount > 0 && (
+                <Badge variant="secondary" className="ml-1">
+                  {activeFilterCount}
+                </Badge>
+              )}
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <ParkSearch 
                 value={filters.search}
@@ -402,12 +434,14 @@ export default function Parks() {
               />
             </div>
             
-            <div className="flex gap-2 flex-1">
+            {/* Sort controls - more compact */}
+            <div className="flex gap-2">
               <ParkSortOptions 
                 sort={sort}
                 onSortChange={setSort}
               />
               
+              {/* Mobile filter toggle */}
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
@@ -457,19 +491,32 @@ export default function Parks() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
-            <div className="sticky top-24">
-              <Card>
-                <CardContent className="pt-6">
-                  <ParkFilters 
-                    filters={filters}
-                    onFiltersChange={setFilters}
-                    parks={parks}
-                  />
-                </CardContent>
-              </Card>
-            </div>
-          </aside>
+          {!sidebarCollapsed && (
+            <aside className="hidden lg:block flex-shrink-0 transition-all duration-300 lg:w-[340px] xl:w-[380px] 2xl:w-[420px]">
+              <div className="sticky top-24">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-base">Filters</CardTitle>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSidebarCollapsed(true)}
+                      title="Hide filters"
+                    >
+                      <PanelLeftClose className="w-4 h-4" />
+                    </Button>
+                  </CardHeader>
+                  <CardContent>
+                    <ParkFilters 
+                      filters={filters}
+                      onFiltersChange={setFilters}
+                      parks={parks}
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/Rides.tsx

@@ -6,8 +6,9 @@ import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Card, CardContent } from '@/components/ui/card';
-import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { RideCard } from '@/components/rides/RideCard';
 import { RideForm } from '@/components/admin/RideForm';
@@ -32,11 +33,19 @@ export default function Rides() {
   const [filters, setFilters] = useState<RideFilterState>(defaultRideFilters);
   const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('rides-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
 
   useEffect(() => {
     fetchRides();
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem('rides-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
   const fetchRides = async () => {
     try {
       const { data } = await supabase
@@ -160,6 +169,22 @@ export default function Rides() {
         {/* Search and Filters */}
         <div className="mb-8 space-y-4">
           <div className="flex flex-col md:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <AutocompleteSearch
                 placeholder="Search rides by name, park, or manufacturer..."
@@ -169,21 +194,24 @@ export default function Rides() {
                 showRecentSearches={false}
               />
             </div>
+
+            {/* Sort controls - more compact */}
             <div className="flex gap-2">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px]">
+                <SelectTrigger className="w-[160px]">
                   <SlidersHorizontal className="w-4 h-4 mr-2" />
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
-                  <SelectItem value="rating">Highest Rated</SelectItem>
-                  <SelectItem value="speed">Fastest</SelectItem>
-                  <SelectItem value="height">Tallest</SelectItem>
-                  <SelectItem value="reviews">Most Reviews</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
+                  <SelectItem value="rating">Rating</SelectItem>
+                  <SelectItem value="speed">Speed</SelectItem>
+                  <SelectItem value="height">Height</SelectItem>
+                  <SelectItem value="reviews">Reviews</SelectItem>
                 </SelectContent>
               </Select>
               
+              {/* Mobile filter toggle */}
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
@@ -213,15 +241,28 @@ export default function Rides() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
-            <div className="sticky top-24">
-              <Card>
-                <CardContent className="pt-6">
-                  <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
-                </CardContent>
-              </Card>
-            </div>
-          </aside>
+          {!sidebarCollapsed && (
+            <aside className="hidden lg:block flex-shrink-0 transition-all duration-300 lg:w-[340px] xl:w-[380px] 2xl:w-[420px]">
+              <div className="sticky top-24">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-base">Filters</CardTitle>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSidebarCollapsed(true)}
+                      title="Hide filters"
+                    >
+                      <PanelLeftClose className="w-4 h-4" />
+                    </Button>
+                  </CardHeader>
+                  <CardContent>
+                    <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
+                  </CardContent>
+                </Card>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">