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 { Link, useNavigate } from 'react-router-dom';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Menu, Button, Drawer } from 'antd';
import { useDispatch } from 'react-redux';
import { clearToken } from '../../store/store';
......@@ -10,21 +10,45 @@ import './Header.css';
type MenuItem = Required<MenuProps>['items'][number];
const MenuItems: MenuItem[] = [
{ key: '1', 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: '3', icon: <MaterialSymbol icon='info' size={24} color='#fff' />, label: <Link to="/requests">Информация о запросах</Link> },
{ key: 'org', icon: <MaterialSymbol icon='list' 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: 'req', icon: <MaterialSymbol icon='info' size={24} color='#fff' />, label: <Link to="/requests">Информация о запросах</Link> },
];
const Header: React.FC = () => {
const [currentNav, setCurrentNav] = useState('');
const [openMenu, setOpenMenu] = useState<boolean>(false);
const dispatch = useDispatch();
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 = () => {
dispatch(clearToken());
navigate('/auth');
};
const handleMenuClick = (e: any) => {
setCurrentNav(e.key);
setOpenMenu(false);
};
return (
<header className="header">
<div className="header_left">
......@@ -48,12 +72,10 @@ const Header: React.FC = () => {
<Menu
theme='dark'
items={MenuItems}
defaultSelectedKeys={['1']}
selectedKeys={[currentNav]}
mode='inline'
className="menu"
onClick={() => {
setOpenMenu(false)
}}
onClick={handleMenuClick}
/>
</Drawer>
<h1 className="header_title">ЕСУТД</h1>
......@@ -62,7 +84,7 @@ const Header: React.FC = () => {
<MaterialSymbol icon='logout' size={24} color='#fff' />
</Button>
</header>
)
}
);
};
export default Header;
\ No newline at end of file
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 { persistReducer, persistStore } from 'redux-persist';
import { apiSlice } from '../features/api/apiSlice';
import mainPaginationReducer from '../features/pagination/mainPagination';
import reqPaginationReducer from '../features/pagination/reqPagination';
interface AuthState {
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