feat: Add collapsible filter sidebar

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';
@@ -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);
@@ -423,6 +434,20 @@ export default function Parks() {
                 )}
               </Button>
 
+              <Button
+                variant="outline"
+                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                className="shrink-0 gap-2 hidden lg:flex"
+                title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+              >
+                <PanelLeftClose className={`w-4 h-4 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`} />
+                {!sidebarCollapsed && activeFilterCount > 0 && (
+                  <Badge variant="secondary" className="ml-1">
+                    {activeFilterCount}
+                  </Badge>
+                )}
+              </Button>
+
               <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
                 <TabsList>
                   <TabsTrigger value="grid">
@@ -457,17 +482,53 @@ 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">
+          <aside 
+            className={cn(
+              "hidden lg:block flex-shrink-0 transition-all duration-300",
+              sidebarCollapsed 
+                ? "lg:w-[60px]" 
+                : "lg:w-[340px] xl:w-[380px] 2xl:w-[420px]"
+            )}
+          >
             <div className="sticky top-24">
-              <Card>
-                <CardContent className="pt-6">
-                  <ParkFilters 
-                    filters={filters}
-                    onFiltersChange={setFilters}
-                    parks={parks}
-                  />
-                </CardContent>
-              </Card>
+              {sidebarCollapsed ? (
+                <Card className="p-2">
+                  <Button
+                    variant="ghost"
+                    className="w-full"
+                    onClick={() => setSidebarCollapsed(false)}
+                    title="Show filters"
+                  >
+                    <PanelLeftOpen className="w-5 h-5" />
+                  </Button>
+                  {activeFilterCount > 0 && (
+                    <Badge variant="secondary" className="w-full mt-2 justify-center">
+                      {activeFilterCount}
+                    </Badge>
+                  )}
+                </Card>
+              ) : (
+                <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>