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

Refactor: Hide sidebar when collapsed

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:59:14 +00:00
parent 575ccd013b
commit ba1c0625b0
5 changed files with 30 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Designers.tsx
View File

@@ -220,25 +220,9 @@ export default function Designers() {
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<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]"
)}
>
{!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">
{sidebarCollapsed ? (
<Button
variant="ghost"
className="w-full"
onClick={() => setSidebarCollapsed(false)}
title="Show filters"
>
<PanelLeftOpen className="w-5 h-5" />
</Button>
) : (
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle>
@@ -255,9 +239,9 @@ export default function Designers() {
<DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
</CardContent>
</Card>
)}
</div>
</aside>
)}
{/* Results Area */}
<div className="flex-1 min-w-0">

22
src/pages/Manufacturers.tsx
View File

@@ -233,25 +233,9 @@ export default function Manufacturers() {
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<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]"
)}
>
{!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">
{sidebarCollapsed ? (
<Button
variant="ghost"
className="w-full"
onClick={() => setSidebarCollapsed(false)}
title="Show filters"
>
<PanelLeftOpen className="w-5 h-5" />
</Button>
) : (
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle>
@@ -268,9 +252,9 @@ export default function Manufacturers() {
<ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
</CardContent>
</Card>
)}
</div>
</aside>
)}
{/* Results Area */}
<div className="flex-1 min-w-0">

22
src/pages/Operators.tsx
View File

@@ -291,25 +291,9 @@ const Operators = () => {
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<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]"
)}
>
{!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">
{sidebarCollapsed ? (
<Button
variant="ghost"
className="w-full"
onClick={() => setSidebarCollapsed(false)}
title="Show filters"
>
<PanelLeftOpen className="w-5 h-5" />
</Button>
) : (
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle>
@@ -326,9 +310,9 @@ const Operators = () => {
<OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
</CardContent>
</Card>
)}
</div>
</aside>
)}
{/* Results Area */}
<div className="flex-1 min-w-0">

22
src/pages/Parks.tsx
View File

@@ -491,25 +491,9 @@ export default function Parks() {
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<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]"
)}
>
{!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">
{sidebarCollapsed ? (
<Button
variant="ghost"
className="w-full"
onClick={() => setSidebarCollapsed(false)}
title="Show filters"
>
<PanelLeftOpen className="w-5 h-5" />
</Button>
) : (
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle>
@@ -530,9 +514,9 @@ export default function Parks() {
/>
</CardContent>
</Card>
)}
</div>
</aside>
)}
{/* Results Area */}
<div className="flex-1 min-w-0">

22
src/pages/Rides.tsx
View File

@@ -241,25 +241,9 @@ export default function Rides() {
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<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]"
)}
>
{!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">
{sidebarCollapsed ? (
<Button
variant="ghost"
className="w-full"
onClick={() => setSidebarCollapsed(false)}
title="Show filters"
>
<PanelLeftOpen className="w-5 h-5" />
</Button>
) : (
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle>
@@ -276,9 +260,9 @@ export default function Rides() {
<RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
</CardContent>
</Card>
)}
</div>
</aside>
)}
{/* Results Area */}
<div className="flex-1 min-w-0">