Refactor: Hide sidebar when collapsed

src/pages/Designers.tsx

@@ -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]"
-            )}
-          >
-            <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>
-          ) : (
+          {!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>
@@ -255,9 +239,9 @@ export default function Designers() {
                     <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
                   </CardContent>
                 </Card>
-              )}
-            </div>
-          </aside>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/Manufacturers.tsx

@@ -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]"
-            )}
-          >
-            <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>
-          ) : (
+          {!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>
@@ -268,9 +252,9 @@ export default function Manufacturers() {
                     <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
                   </CardContent>
                 </Card>
-              )}
-            </div>
-          </aside>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/Operators.tsx

@@ -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]"
-            )}
-          >
-            <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>
-          ) : (
+          {!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>
@@ -326,9 +310,9 @@ const Operators = () => {
                     <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
                   </CardContent>
                 </Card>
-              )}
-            </div>
-          </aside>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/Parks.tsx

@@ -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]"
-            )}
-          >
-            <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>
-          ) : (
+          {!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>
@@ -530,9 +514,9 @@ export default function Parks() {
                     />
                   </CardContent>
                 </Card>
-              )}
-            </div>
-          </aside>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">

src/pages/Rides.tsx

@@ -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]"
-            )}
-          >
-            <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>
-          ) : (
+          {!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>
@@ -276,9 +260,9 @@ export default function Rides() {
                     <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
                   </CardContent>
                 </Card>
-              )}
-            </div>
-          </aside>
+              </div>
+            </aside>
+          )}
 
           {/* Results Area */}
           <div className="flex-1 min-w-0">