routing

SurveyFrontend/src/components/Header/Header.tsx

@@ -1,27 +1,33 @@
-import React, {useState} from "react";
+import React from "react";
 import Logo from "../Logo/Logo.tsx";
 import Account from "../Account/Account.tsx";
 import styles from './Header.module.css'
-import SurveyPagesList from "../SurveyPagesList/SurveyPagesList.tsx";
+import {Link, useLocation} from "react-router-dom";
 
 
 
 const Header: React.FC = () => {
-    const [activePage, setActivePage] = useState('Создать опрос');
-
-    const handlePageClick = (name: string)=> {
-        setActivePage(name);
-    }
+    const location = useLocation();
+    const isCreateSurveyActive = location.pathname.includes('/survey/edit');
+    const isMySurveyActive = location.pathname === '/my-surveys';
 
     return (
         <div className={styles.header}>
-            <Logo href='' />
-            <SurveyPagesList
-                activePage={activePage}
-                onPageClick = {handlePageClick}
-            />
+            <Logo href='/' />
+            <nav className={styles.pagesNav}>
+                <Link to='/survey/edit/questions'
+                className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}>
+                    Создать опрос
+                    {isCreateSurveyActive && <hr className={styles.activeLine}/>}
+                </Link>
+                <Link to='/my-surveys'
+                className={`${styles.pageLink} ${isMySurveyActive ? styles.active : ''}`}>
+                    Мои опросы
+                    {isMySurveyActive && <hr className={styles.activeLine}/>}
+                </Link>
+            </nav>
             <Account
-                href=''
+                href='/profile'
                 user='Иванов Иван'
             />
         </div>