routing

SurveyFrontend/src/components/Header/Header.module.css

@@ -5,4 +5,39 @@
     padding: 0;
     width: 100%;
     display: flex;
+}
+
+.pagesNav{
+    display: flex;
+    gap: 60px;
+    list-style: none;
+    align-items: center;
+    margin-right: 40%;
+
+}
+
+.pageLink{
+    font-size: 24px;
+    font-weight: 600;
+    color: #2A6DAE;
+    padding: 0;
+    border: none;
+    background-color: #ffffff;
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.active{
+    margin-bottom: -15px;
+    color: #000000;
+    text-decoration-color: #3881C8;
+}
+
+.activeLine{
+    display: block;
+    margin-top: 5px;
+    border: 1px solid #000000;
+    width: 50%;
+    padding: 0;
+    box-shadow: 0 1px 4px 0 #3881C8;
 }

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>

SurveyFrontend/src/components/Navigation/Navigation.tsx

@@ -1,15 +1,25 @@
 import React from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
 import styles from './Navigation.module.css'
 import NavigationItem from "../NavigationItem/NavigationItem.tsx";
 import SaveButton from "../SaveButton/SaveButton.tsx";
 
-interface NavigationProps {
-    onNavigationClick: (title: string) => void;
-    activePage: string
-}
 
-const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage}) => {
-    const items: string[] = ['Вопросы', 'Настройки', 'Результаты']
+const Navigation: React.FC = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const activePage = location.pathname.split('/').pop() || 'questions'
+
+    const items = [
+        {id: 'questions', title: 'Вопросы'},
+        {id: 'settings', title: 'Настройки'},
+        {id: 'results', title: 'Результаты'}
+    ]
+
+    const handleNavigationClick = (padeId: string) => {
+        navigate(`${padeId}`);
+    }
 
     return (
         <div className={styles.navContainer}>
@@ -17,10 +27,10 @@ const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage})
                 <ul className={styles.navList}>
                     {items.map(item => (
                         <NavigationItem
-                            key={item}
-                            title={item}
-                            isActive={activePage === item}
-                            onClick={() => onNavigationClick(item)}
+                            key={item.id}
+                            title={item.title}
+                            isActive={activePage === item.id}
+                            onClick={() => handleNavigationClick(item.id)}
                         />
                     ))}
                 </ul>

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css

@@ -1,8 +1,7 @@
 /*SettingSurvey.module.css*/
 
 .settingSurvey{
-    width: 65%;
-    margin-left: 8.9%;
+    width: 85%;
 }
 
 .startEndTime{

SurveyFrontend/src/components/Survey/Survey.module.css

@@ -1,6 +1,5 @@
 /*Survey.module.css*/
 
 .survey{
-    width: 65%;
-    margin-left: 8.9%;
+    width: 85%;
 }