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 ( <> + title={category ? `${category.name} купить` : "Каталог продукции"} + description={ + category + ? `Купить ${category.name} по выгодной цене. Большой выбор товаров.` + : "Каталог продукции: трубы ПВХ, аксессуары и комплектующие" + } + /> + + +
-