добавил навигацию на катекории и сброс выбранной категории при переходе на страницу каталога

This commit is contained in:
Joe_Peach committed 2026-04-21 16:21:41 +03:00
1 parent b229b5b84c
commit 530f583727
3 files changed
+17 -3

No files matched your search

+4 -1
View File
@@ -2,9 +2,12 @@ import { NavLink } from "react-router-dom";
import styles from './Header.module.css' import styles from './Header.module.css'
import logo from '../../assets/images/Logo.jpg' import logo from '../../assets/images/Logo.jpg'
import { useState } from "react"; import { useState } from "react";
import { useAppDispatch } from "../../app/hooks";
import { setSelectedCategory } from "../../features/catalog/categoriesSlice";
const Header = () =>{ const Header = () =>{
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const dispatch = useAppDispatch();
return ( return (
<nav className={styles.header}> <nav className={styles.header}>
@@ -31,7 +34,7 @@ const [menuOpen, setMenuOpen] = useState(false);
<div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}> <div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}>
<NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink> <NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink>
<NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink> <NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
<NavLink to="products" onClick={() => setMenuOpen(false)}>ПРОДУКЦИЯ</NavLink> <NavLink to="products" onClick={() => {setMenuOpen(false); dispatch(setSelectedCategory(null))}}>ПРОДУКЦИЯ</NavLink>
</div> </div>
</div> </div>
+9
View File
@@ -3,6 +3,15 @@
min-height: 100vh; min-height: 100vh;
} }
.resetLink {
text-decoration: none;
color: inherit;
cursor: pointer;
font-size: 16px;
color: #f5c400;
}
.top { .top {
background: #000; background: #000;
padding: 15px 40px; padding: 15px 40px;
+4 -2
View File
@@ -1,13 +1,15 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { fetchProductById } from "../../features/catalog/productsSlice"; import { fetchProductById, setSelectedProducts } from "../../features/catalog/productsSlice";
import styles from "./ItemPage.module.css"; import styles from "./ItemPage.module.css";
import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories"; import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
import Button from "../../components/Button/Button"; import Button from "../../components/Button/Button";
import PriceLisForm from "../../components/PriceLisForm/PriceLisForm"; import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
import ProductAttributes from "../../components/Table/ProducTable"; import ProductAttributes from "../../components/Table/ProducTable";
import { p, title } from "framer-motion/client"; import { p, title } from "framer-motion/client";
import Link from "antd/es/typography/Link";
import { setSelectedCategory } from "../../features/catalog/categoriesSlice";
const ItemPage = () => { const ItemPage = () => {
const { id } = useParams(); const { id } = useParams();
@@ -47,7 +49,7 @@ const ItemPage = () => {
<div className={styles.right}> <div className={styles.right}>
<div className={styles.rightContent}> <div className={styles.rightContent}>
<div className={styles.breadcrumbs}> <div className={styles.breadcrumbs}>
ГЛАВНАЯ / {category?.name} / {product.name} <Link onClick={() => {navigate('/products'); dispatch(setSelectedCategory(null))}} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>КАТЕГОРИИ</Link> / <Link onClick={() => navigate('/products')} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>{category?.name}</Link> / <Link onClick={() => navigate(`/product/${id}`)} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>{product.name}</Link>
</div> </div>
<h1 className={styles.title}>{product.name}</h1> <h1 className={styles.title}>{product.name}</h1>