From c1adee646f077325d5e9594cb2fd7d5018ae1977 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Tue, 25 Nov 2025 17:39:03 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=B1=D0=BE=D1=80=D0=B0=20=D0=BA=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D0=B9=20=D1=81=D0=B1=D0=BE=D0=BA?=
 =?UTF-8?q?=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/catalog/SidebarCategories.tsx    | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/front/src/features/catalog/SidebarCategories.tsx b/front/src/features/catalog/SidebarCategories.tsx
index bbcdad2..3844280 100644
--- a/front/src/features/catalog/SidebarCategories.tsx
+++ b/front/src/features/catalog/SidebarCategories.tsx
@@ -5,8 +5,33 @@ import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
 import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
 
 const SidebarCategories: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
+
+    useEffect(() => { 
+        dispatch(fetchCategories()); 
+    }, [dispatch]);
+
+    const onClick = (catId: number) => {
+    dispatch(setSelectedCategory(catId));
+    dispatch(setFilters({})); // сброс фильтров
+    dispatch(setPage(1));
+    dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
+  };
     return(
-        <>
-        </>
+        <aside className={styles.sidebar}>
+            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
+            {loading ? <p>Загрузка...</p> : (
+                <ul className={styles.list}>
+                {items.map(cat => (
+                    <li key={cat.id}
+                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+                        onClick={() => onClick(cat.id)}>
+                    {cat.name}
+                    </li>
+                ))}
+                </ul>
+            )}
+        </aside>
     )
 }
\ No newline at end of file