Refactor: Implement side-by-side filter layout

src/pages/Designers.tsx

@@ -167,7 +167,7 @@ export default function Designers() {
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -176,33 +176,52 @@ export default function Designers() {
             </div>
           </div>
           
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
-              <Card className="mt-4">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card className="mt-4">
+                  <CardContent className="pt-6">
+                    <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
+                  </CardContent>
+                </Card>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+
+        {/* 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-80 xl:w-96 flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
                 <CardContent className="pt-6">
                   <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Companies Grid */}
+          {/* Results Area */}
-        {filteredCompanies.length > 0 ? (
+          <div className="flex-1 min-w-0">
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+            {filteredCompanies.length > 0 ? (
-            {filteredCompanies.map((company) => (
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-              <DesignerCard key={company.id} company={company} />
+                {filteredCompanies.map((company) => (
-            ))}
+                  <DesignerCard key={company.id} company={company} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No designers found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search criteria
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No designers found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria
-            </p>
-          </div>
-        )}
       </main>
       <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
         <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">

src/pages/Manufacturers.tsx

@@ -180,7 +180,7 @@ export default function Manufacturers() {
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -189,33 +189,52 @@ export default function Manufacturers() {
             </div>
           </div>
           
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
-              <Card className="mt-4">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card className="mt-4">
+                  <CardContent className="pt-6">
+                    <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
+                  </CardContent>
+                </Card>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+
+        {/* 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-80 xl:w-96 flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
                 <CardContent className="pt-6">
                   <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Companies Grid */}
+          {/* Results Area */}
-        {filteredCompanies.length > 0 ? (
+          <div className="flex-1 min-w-0">
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+            {filteredCompanies.length > 0 ? (
-            {filteredCompanies.map((company) => (
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-              <ManufacturerCard key={company.id} company={company} />
+                {filteredCompanies.map((company) => (
-            ))}
+                  <ManufacturerCard key={company.id} company={company} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No manufacturers found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search criteria
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No manufacturers found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria
-            </p>
-          </div>
-        )}
       </main>
 
       {/* Create Modal */}

src/pages/Operators.tsx

@@ -238,7 +238,7 @@ const Operators = () => {
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -247,49 +247,68 @@ const Operators = () => {
             </div>
           </div>
           
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
-              <Card className="mt-4">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card className="mt-4">
+                  <CardContent className="pt-6">
+                    <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
+                  </CardContent>
+                </Card>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+
+        {/* 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-80 xl:w-96 flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
                 <CardContent className="pt-6">
                   <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
+
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
+            {/* Loading State */}
+            {isLoading && (
+              <div className="text-center py-12">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                <p className="text-muted-foreground mt-4">Loading park operators...</p>
+              </div>
+            )}
+
+            {/* Operators Grid */}
+            {!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+                {filteredAndSortedOperators.map((operator) => (
+                  <OperatorCard key={operator.id} company={operator} />
+                ))}
+              </div>
+            )}
+
+            {/* Empty State */}
+            {!isLoading && filteredAndSortedOperators?.length === 0 && (
+              <div className="text-center py-12">
+                <Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">No park operators found</h3>
+                <p className="text-muted-foreground">
+                  {searchTerm 
+                    ? "Try adjusting your search terms or filters"
+                    : "No park operators are currently available"
+                  }
+                </p>
+              </div>
+            )}
+          </div>
         </div>
 
-
-        {/* Loading State */}
-        {isLoading && (
-          <div className="text-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
-            <p className="text-muted-foreground mt-4">Loading park operators...</p>
-          </div>
-        )}
-
-        {/* Operators Grid */}
-        {!isLoading && filteredAndSortedOperators && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-            {filteredAndSortedOperators.map((operator) => (
-              <OperatorCard key={operator.id} company={operator} />
-            ))}
-          </div>
-        )}
-
-        {/* Empty State */}
-        {!isLoading && filteredAndSortedOperators?.length === 0 && (
-          <div className="text-center py-12">
-            <Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-            <h3 className="text-lg font-semibold mb-2">No park operators found</h3>
-            <p className="text-muted-foreground">
-              {searchTerm 
-                ? "Try adjusting your search terms or filters"
-                : "No park operators are currently available"
-              }
-            </p>
-          </div>
-        )}
-
         {/* Create Modal */}
         <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
           <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">

src/pages/Parks.tsx

@@ -411,7 +411,7 @@ export default function Parks() {
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
-                className="shrink-0 gap-2"
+                className="shrink-0 gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -436,9 +436,29 @@ export default function Parks() {
             </div>
           </div>
 
-          {/* Advanced Filters Panel */}
+          {/* Mobile Filters */}
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          <div className="lg:hidden">
-            <CollapsibleContent>
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card>
+                  <CardContent className="pt-6">
+                    <ParkFilters 
+                      filters={filters}
+                      onFiltersChange={setFilters}
+                      parks={parks}
+                    />
+                  </CardContent>
+                </Card>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+
+        {/* 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-80 xl:w-96 flex-shrink-0">
+            <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">
                   <ParkFilters 
@@ -448,36 +468,38 @@ export default function Parks() {
                   />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Results */}
+          {/* Results Area */}
-        {filteredAndSortedParks.length > 0 ? (
+          <div className="flex-1 min-w-0">
-          <div>
+            {filteredAndSortedParks.length > 0 ? (
-            {viewMode === 'grid' ? (
+              <div>
-              <ParkGridView 
+                {viewMode === 'grid' ? (
-                parks={filteredAndSortedParks} 
+                  <ParkGridView 
-              />
+                    parks={filteredAndSortedParks} 
+                  />
+                ) : (
+                  <ParkListView 
+                    parks={filteredAndSortedParks} 
+                    onParkClick={handleParkClick}
+                  />
+                )}
+              </div>
             ) : (
-              <ParkListView 
+              <div className="text-center py-12">
-                parks={filteredAndSortedParks} 
+                <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
-                onParkClick={handleParkClick}
+                <h3 className="text-xl font-semibold mb-2">No parks found</h3>
-              />
+                <p className="text-muted-foreground mb-4">
+                  Try adjusting your search terms or filters
+                </p>
+                <Button onClick={clearAllFilters} variant="outline">
+                  Clear all filters
+                </Button>
+              </div>
             )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
-            <h3 className="text-xl font-semibold mb-2">No parks found</h3>
-            <p className="text-muted-foreground mb-4">
-              Try adjusting your search terms or filters
-            </p>
-            <Button onClick={clearAllFilters} variant="outline">
-              Clear all filters
-            </Button>
-          </div>
-        )}
 
         {/* Add Park Modal */}
         <Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}>

src/pages/Rides.tsx

@@ -187,7 +187,7 @@ export default function Rides() {
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -196,33 +196,52 @@ export default function Rides() {
             </div>
           </div>
 
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card>
+                  <CardContent className="pt-6">
+                    <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
+                  </CardContent>
+                </Card>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+
+        {/* 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-80 xl:w-96 flex-shrink-0">
+            <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">
                   <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Rides Grid */}
+          {/* Results Area */}
-        {filteredRides.length > 0 ? (
+          <div className="flex-1 min-w-0">
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+            {filteredRides.length > 0 ? (
-            {filteredRides.map((ride) => (
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-              <RideCard key={ride.id} ride={ride} showParkName={true} />
+                {filteredRides.map((ride) => (
-            ))}
+                  <RideCard key={ride.id} ride={ride} showParkName={true} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No rides found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search criteria or filters
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No rides found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria or filters
-            </p>
-          </div>
-        )}
 
         {/* Create Modal */}
         <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>