survey-webapp/SurveyFrontend/src/components/Header/Header.tsx

import React from "react";
import Logo from "../Logo/Logo.tsx";
import Account from "../Account/Account.tsx";
import styles from './Header.module.css';
import {Link, useLocation, useNavigate} from "react-router-dom";

const Header: React.FC = () => {
    const location = useLocation();
    const navigate = useNavigate();

    const isCreateSurveyActive = location.pathname.startsWith('/survey/create');
    const isMySurveysActive = location.pathname === '/my-surveys';
    const isCompleteSurveyActive = location.pathname === '/complete-survey';

    const isSurveyViewPage = location.pathname.startsWith('/survey/') &&
        !location.pathname.startsWith('/survey/create');

    const handleLogoClick = () => {
        navigate(location.pathname, { replace: true });
    };

    return (
        <div className={styles.header}>
            <Logo href={location.pathname} onClick={handleLogoClick} />
            <nav className={styles.pagesNav}>
                <Link
                    to='/survey/create/questions'
                    className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}
                >
                    Создать опрос
                    {isCreateSurveyActive && <hr className={styles.activeLine}/>}
                </Link>
                <Link
                    to='/my-surveys'
                    className={`${styles.pageLink} ${isMySurveysActive || isSurveyViewPage ? styles.active : ''}`}
                >
                    Мои опросы
                    {(isMySurveysActive || isSurveyViewPage) && <hr className={styles.activeLine}/>}
                </Link>
                <Link
                    to='/complete-survey'
                    className={`${styles.pageLink} ${isCompleteSurveyActive ? styles.active : ''}`}
                >
                    Прохождение опроса
                    {isCompleteSurveyActive && <hr className={styles.activeLine}/>}
                </Link>
            </nav>
            <Account href={'/profile'} />
        </div>
    );
};

export default Header;