src/components/Header/header.tsx - master - jonca3d/react-animation-ts

src/components/Header/header.tsx
90 строк3 KB
Evgeniy
update proj
10 окт 2024, 18:17
10 окт 2024, 18:17cdc0030
import styles from './header.module.css';
import Spinner from '../Spinner/spinner'
import Button from '../Button/button';
import { useContext } from 'react';
import { ThemeContext } from '../../context/ThemeContext';
import { Link, useNavigate } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../hooks/hooks';
import { setAuth } from '../../redux/authSlice';
import { setUser } from '../../redux/userSlice';
import Toggle from '../Toggle/toggle';


function Header() {
    const MENU = [
        { title: "На главную", to: "/" },
        { title: "Слайдшоу", to: "/slideshow" },
        { title: "Задачи", to: "/tasks" },
    ];
    const { theme, setTheme } = useContext(ThemeContext);

    const isAuth = useAppSelector((state) => state.auth.isAuth)
    const dispatch = useAppDispatch();
    const navigate = useNavigate();

    const logoutHandler = (): void => {
        localStorage.removeItem("token");
        dispatch(setAuth(false));
        dispatch(
            setUser({
                email: "",
                firstName: "",
                lastName: "",
                accessToken: "",
                refreshToken: "",
            })
        );
        navigate("/")
    }

    const hadleClick = () => {
        theme === "light" ? setTheme("dark") : setTheme("light")
    };
    return (
        <div className={styles['main-nav']}>

            <div className={styles["spinner"]}>
                <Link to={"/"}>
                    <Spinner />
                </Link>
            </div>

            <ul className={styles['main-nav__menu']}>
                {MENU.map(({ title, to }, i) => (
                    <li className={styles['main-nav__menu-item']}>
                        <Link
                            key={`menu-item-${i}`}
                            to={to}
                            className={styles["main-nav__menu-link"]}
                        >
                            {title}
                        </Link>
                    </li>
                ))}
            </ul>
            {/* <div className={styles['btn-container']}>
                <Button label='Registry' onClick={hadleClick} />
            </div> */}
            <div className={styles['right-side']}>
                {!isAuth && (
                    <div className={styles['btn-container']}>
                        <Link to={"/reg"} className={styles['space']}>
                            <Button label='Registry' />
                        </Link>
                        <Link to={"/auth"}>
                            <Button label='Auth' />
                        </Link>

                    </div>
                )}
                <Toggle
                    onClick={() => {
                        theme === "light" ? setTheme("dark") : setTheme("light")
                    }}
                />
            </div>
        </div>
    )
}

export default Header;