pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 13:51:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add collapsible filter sidebar

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:38:53 +00:00
parent ef312618f5
commit 477844310f
5 changed files with 302 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/Rides.tsx
View File

@@ -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
@@ -193,6 +202,15 @@ export default function Rides() {
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<Button
variant="outline"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="gap-2 hidden lg:flex"
title={sidebarCollapsed ? "Show filters" : "Hide filters"}
>
<PanelLeftClose className={`w-4 h-4 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`} />
</Button>
</div>
</div>
@@ -213,13 +231,44 @@ 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">
<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">
<RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
</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>
</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>
<RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
</CardContent>
</Card>
)}
</div>
</aside>