доделал адаптацию под мобильные устройства

src/pages/Products/Products.module.css

@@ -1,8 +1,6 @@
 /* ===== ОБЩИЙ ЛЭЙАУТ ===== */
 .wrapper {
-  display: flex;
-    margin: 0;
-    justify-content: center;
+ 
 }
 
 .container{
@@ -10,7 +8,7 @@
   background: #f3f3f3;
   min-height: 100vh;
   font-family: Arial, sans-serif;
-  width: 80%;
+  
 }
 
 /* ===== САЙДБАР ===== */
@@ -177,6 +175,65 @@
   color: #000;
 }
 
+.mobileFilterBtn {
+  display: none;
+  margin-bottom: 15px;
+  padding: 12px;
+  background: #000;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+/* overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+
+/* кнопка закрытия */
+.closeBtn {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  margin-top: 70px;
+}
+
+/* ================= MOBILE ================= */
+
+@media (max-width: 600px) {
+  .mobileFilterBtn {
+    display: block;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 80%;
+    height: 100%;
+    background: white;
+    z-index: 100;
+    padding: 20px;
+    overflow-y: auto;
+    transition: 0.3s;
+  }
+
+  .sidebarOpen {
+    left: 0;
+  }
+
+  .closeBtn {
+    display: block;
+  }
+
+  
+}
+
 /* ===== АДАПТИВ ===== */
 
 
@@ -210,9 +267,7 @@
 }
 
 @media (max-width: 768px) {
-  .wrapper {
-    flex-direction: column;
-  }
+  
 
   
 
@@ -231,8 +286,12 @@
 
 @media (max-width: 600px){
   .products {
-    width: 150px;
+    width: 100%;
 }
 
+.main{
+  justify-content: center;
+  
+}
 
 }

src/pages/Products/Products.tsx

@@ -7,33 +7,44 @@ import ProductGrid from "../../features/catalog/ProductGrid";
 import Pagination from "../../features/catalog/Pagination";
 import { useAppSelector } from "../../app/hooks";
 import SEO from "../../shared/ui/SEO";
+import { useState } from "react";
 
 const ProductsPage: React.FC = () => {
-  const { selectedCategoryId, items } = useAppSelector(s => s.categories);
-  const category = items.find(c => c.id === selectedCategoryId);
+  const { selectedCategoryId, items } = useAppSelector((s) => s.categories);
+  const category = items.find((c) => c.id === selectedCategoryId);
+
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
       <SEO
-          title={
-            category
-              ? `${category.name} купить`
-              : "Каталог продукции"
-          }
-          description={
-            category
-              ? `Купить ${category.name} по выгодной цене. Большой выбор товаров.`
-              : "Каталог продукции: трубы ПВХ, аксессуары и комплектующие"
-          }
-        />
+        title={category ? `${category.name} купить` : "Каталог продукции"}
+        description={
+          category
+            ? `Купить ${category.name} по выгодной цене. Большой выбор товаров.`
+            : "Каталог продукции: трубы ПВХ, аксессуары и комплектующие"
+        }
+      />
+      
+
+        
       <div className={styles.wrapper}>
         <div className={styles.container}>
-          <aside className={styles.sidebar}>
+          <aside className={`${styles.sidebar} ${isOpen ? styles.sidebarOpen : ""}`}>
+            <button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
+              ✕
+            </button>
             <SidebarCategories />
             {selectedCategoryId && <Filters />}
           </aside>
 
           <main className={styles.main}>
+            <button
+              className={styles.mobileFilterBtn}
+              onClick={() => setIsOpen(true)}
+            >
+              Фильтры и категории
+            </button>
             {!selectedCategoryId ? (
               <CategoryCards />
             ) : (
@@ -49,4 +60,4 @@ const ProductsPage: React.FC = () => {
   );
 };
 
-export default ProductsPage;
+export default ProductsPage;