diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index 729bd41..9c6d620 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -9,7 +9,7 @@ padding: 40px 0;
width: 90%;
margin: 0 auto;
display: flex;
-align-items: flex-start;
+align-items: center;
justify-content: space-between;
}
@@ -56,7 +56,9 @@ color: #fff;
.right {
+
text-align: right;
+
}
@@ -165,6 +167,7 @@ color: #fff;
flex-direction: column;
gap: 4px;
font-size: 10px;
+ width: 30%;
}
.footer {
@@ -174,6 +177,8 @@ padding: 20px 0;
.left {
gap: 10px;
+width: 30%;
+align-items: center;
}
.copy {
@@ -194,7 +199,7 @@ text-align: right;
.phone {
color: #fff;
-font-size: 14px;
+font-size: 10px;
font-weight: 400;
}
diff --git a/src/features/catalog/Catalog.module.css b/src/features/catalog/Catalog.module.css
index 284e1ea..68a55d0 100644
--- a/src/features/catalog/Catalog.module.css
+++ b/src/features/catalog/Catalog.module.css
@@ -265,17 +265,13 @@ button:disabled {
@media (max-width: 600px) {
.grid {
- grid-template-columns: 1fr;
+ grid-template-columns: repeat(3, 1fr);
}
.wrap{
margin: 0;
padding-bottom: 10px;
}
-
- .go {
- display: none;
-}
}
@@ -285,7 +281,10 @@ button:disabled {
}
}
-@media (max-width: 1254px) {
+@media (max-width: 500px) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
@media (max-width: 1045px) {
diff --git a/src/pages/Products/Products.module.css b/src/pages/Products/Products.module.css
index 81769ff..e0b7345 100644
--- a/src/pages/Products/Products.module.css
+++ b/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;
+
+}
}
\ No newline at end of file
diff --git a/src/pages/Products/Products.tsx b/src/pages/Products/Products.tsx
index ae13fbb..a04aecb 100644
--- a/src/pages/Products/Products.tsx
+++ b/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 (
<>