Commit 6880164c authored by Merekeyev Dias's avatar Merekeyev Dias

fixed bug: the menu selection doesn't change after redirecting to other page...

fixed bug: the menu selection doesn't change after redirecting to other page manually (url or back/forw buttons)
parent 651d4bd9
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import { MaterialSymbol } from 'react-material-symbols'; import { MaterialSymbol } from 'react-material-symbols';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Menu, Button, Drawer } from 'antd'; import { Menu, Button, Drawer } from 'antd';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { clearToken } from '../../store/store'; import { clearToken } from '../../store/store';
...@@ -10,21 +10,45 @@ import './Header.css'; ...@@ -10,21 +10,45 @@ import './Header.css';
type MenuItem = Required<MenuProps>['items'][number]; type MenuItem = Required<MenuProps>['items'][number];
const MenuItems: MenuItem[] = [ const MenuItems: MenuItem[] = [
{ key: '1', icon: <MaterialSymbol icon='list' size={24} color='#fff' />, label: <Link to="/">Список организаций</Link> }, { key: 'org', icon: <MaterialSymbol icon='list' size={24} color='#fff' />, label: <Link to="/">Список организаций</Link> },
{ key: '2', icon: <MaterialSymbol icon='developer_guide' size={24} color='#fff' />, label: <Link to="/">Справочники</Link> }, { key: 'man', icon: <MaterialSymbol icon='developer_guide' size={24} color='#fff' />, label: <Link to="/manuals">Справочники</Link> },
{ key: '3', icon: <MaterialSymbol icon='info' size={24} color='#fff' />, label: <Link to="/requests">Информация о запросах</Link> }, { key: 'req', icon: <MaterialSymbol icon='info' size={24} color='#fff' />, label: <Link to="/requests">Информация о запросах</Link> },
]; ];
const Header: React.FC = () => { const Header: React.FC = () => {
const [currentNav, setCurrentNav] = useState('');
const [openMenu, setOpenMenu] = useState<boolean>(false); const [openMenu, setOpenMenu] = useState<boolean>(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
const pathToNavKey = (path: string) => {
switch (path) {
case '/manuals':
return 'man';
case '/requests':
return 'req';
default:
return 'org';
}
};
const currentPath = location.pathname;
const navKey = pathToNavKey(currentPath);
setCurrentNav(navKey);
}, [location.pathname, setCurrentNav]);
const handleLogout = () => { const handleLogout = () => {
dispatch(clearToken()); dispatch(clearToken());
navigate('/auth'); navigate('/auth');
}; };
const handleMenuClick = (e: any) => {
setCurrentNav(e.key);
setOpenMenu(false);
};
return ( return (
<header className="header"> <header className="header">
<div className="header_left"> <div className="header_left">
...@@ -48,12 +72,10 @@ const Header: React.FC = () => { ...@@ -48,12 +72,10 @@ const Header: React.FC = () => {
<Menu <Menu
theme='dark' theme='dark'
items={MenuItems} items={MenuItems}
defaultSelectedKeys={['1']} selectedKeys={[currentNav]}
mode='inline' mode='inline'
className="menu" className="menu"
onClick={() => { onClick={handleMenuClick}
setOpenMenu(false)
}}
/> />
</Drawer> </Drawer>
<h1 className="header_title">ЕСУТД</h1> <h1 className="header_title">ЕСУТД</h1>
...@@ -62,7 +84,7 @@ const Header: React.FC = () => { ...@@ -62,7 +84,7 @@ const Header: React.FC = () => {
<MaterialSymbol icon='logout' size={24} color='#fff' /> <MaterialSymbol icon='logout' size={24} color='#fff' />
</Button> </Button>
</header> </header>
) );
} };
export default Header; export default Header;
\ No newline at end of file
import { configureStore, Store, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { configureStore, Store, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { apiSlice } from '../features/api/apiSlice';
import mainPaginationReducer from '../features/pagination/mainPagination';
import storage from 'redux-persist/lib/storage'; import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist'; import { persistReducer, persistStore } from 'redux-persist';
import { apiSlice } from '../features/api/apiSlice';
import mainPaginationReducer from '../features/pagination/mainPagination';
import reqPaginationReducer from '../features/pagination/reqPagination'; import reqPaginationReducer from '../features/pagination/reqPagination';
interface AuthState { interface AuthState {
token: string | null; token: string | null;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment