routing

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>