45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
||
import styles from './Header.module.css'
|
||
import logo from '../../assets/images/Logo.jpg'
|
||
import { useState } from "react";
|
||
import { useAppDispatch } from "../../app/hooks";
|
||
import { setSelectedCategory } from "../../features/catalog/categoriesSlice";
|
||
|
||
const Header = () =>{
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
const dispatch = useAppDispatch();
|
||
|
||
return (
|
||
<nav className={styles.header}>
|
||
<div className={styles.headerMenu}>
|
||
|
||
<div className={styles.headeLogo}>
|
||
<img src={logo} alt="logo" className={styles.logoImage}/>
|
||
<div className={styles.phoneBlock}>
|
||
<a href="">+7 910 121 09 62</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* БУРГЕР */}
|
||
<div
|
||
className={`${styles.burger} ${menuOpen ? styles.active : ""}`}
|
||
onClick={() => setMenuOpen(!menuOpen)}
|
||
>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
|
||
{/* НАВИГАЦИЯ */}
|
||
<div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}>
|
||
<NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink>
|
||
<NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
|
||
<NavLink to="products" onClick={() => {setMenuOpen(false); dispatch(setSelectedCategory(null))}}>ПРОДУКЦИЯ</NavLink>
|
||
</div>
|
||
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|
||
|
||
export default Header; |