I have a React app where I have added a sidebar. It works onClick and screen changes perfectly. But when an item is selected in sidebar, the selected background color doesn’t change on click. After pressing on an item, it goes to the default selected item and on second press the background color works. How to fix that? Here’s what i have now:
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PieChartOutlined, MailOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import type { MenuProps } from 'antd';
import { useWindowDimensions } from '../modules/hooks';
import profileIcon from '../assests/profileIcon.png';
import { useSelector } from 'react-redux';
import { RootState } from '~/store';
type MenuItem = Required<MenuProps>['items'][number];
const Sidebar: React.FC<{ showFlowSheets: boolean; patientData: any }> = ({
showFlowSheets,
patientData,
}) => {
const [collapsed, setCollapsed] = useState(false);
const [selectedKey, setSelectedKey] = useState<string>('1'); // Manage selected key state
const { height } = useWindowDimensions();
const navigate = useNavigate();
const userState = useSelector((state: RootState) => state.user);
const supervisorState = useSelector((state: RootState) => state.supervisor);
const items: MenuItem[] = [
{ key: '1', icon: <PieChartOutlined />, label: 'Patients List' },
...(showFlowSheets
? [
{
key: 'sub1',
label: 'Flow Sheets',
icon: <MailOutlined />,
children: [
{
key: '2',
label: 'ADDS Chart',
children:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? [{ key: '9', label: 'View ADDS Chart' }]
: null,
},
{
key: '3',
label: 'IV Fluids Chart',
children:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? [
{ key: '6', label: 'View IV Fluids' },
{ key: '7', label: 'Add IV Fluids' },
]
: null,
},
{
key: 'sub2',
label: 'Medication Chart',
children:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? [
{ key: '4', label: 'PRN Medicine Chart' },
{ key: '5', label: 'Regular Medicine Chart' },
{
key: 'sub3',
label: 'View Student Records',
children: [
{ key: '12', label: 'PRN Student Records' },
{ key: '15', label: 'Regular Student Records' },
],
},
]
: [
{ key: '10', label: 'PRN Medicine Chart' },
{ key: '11', label: 'Regular Medicine Chart' },
],
},
],
},
{
key: supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated ? '14' : '13',
icon: <MailOutlined />,
label:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? 'View Progress Notes'
: 'Progress Notes',
},
]
: []),
];
const handleMenuClick = (e: { key: string }) => {
setSelectedKey(e.key);
switch (e.key) {
case '1':
navigate('/private');
break;
case '2':
navigate('/adds-chart', { state: { patientData } });
break;
case '3':
navigate('/iv-fluids-chart', { state: { patientData } });
break;
case '4':
navigate('/prn-chart-sup', { state: { patientData } });
break;
case '5':
navigate('/regular-chart-sup', { state: { patientData } });
break;
case '6':
navigate('/view-iv-fluids', { state: { patientData } });
break;
case '7':
navigate('/add-iv-fluids', { state: { patientData } });
break;
case '9':
navigate('/view-adds-chart', { state: { patientData } });
break;
case '10':
navigate('/prn-chart', { state: { patientData } });
break;
case '11':
navigate('/regular-chart', { state: { patientData } });
break;
case '12':
navigate('/prn-student-records', { state: { patientData } });
break;
case '13':
navigate('/progress-notes', { state: { patientData } });
break;
case '14':
navigate('/view-progress-notes', { state: { patientData } });
break;
case '15':
navigate('/reg-student-records', { state: { patientData } });
break;
default:
break;
}
};
return (
<div style={{ width: 305, position: 'fixed', alignSelf: 'flex-start' }}>
<Menu
mode="inline"
theme="dark"
defaultOpenKeys={['sub1','sub2','sub3','3']}
selectedKeys={[selectedKey]}
inlineCollapsed={collapsed}
items={items}
onClick={handleMenuClick}
style={{ height: height - 120, backgroundColor: '#424242', paddingTop: 50 }}
/>
<div
style={{
width: '100%',
height: 50,
backgroundColor: '#000',
alignItems: 'center',
display: 'flex',
}}
>
<img src={profileIcon} style={{ width: 49, height: 42, marginLeft: 20 }} />
<p style={{ color: '#fff', marginLeft: 10 }}>
{userState.isAuthenticated ? 'Student' : 'Supervisor'}
</p>
</div>
</div>
);
};
export default Sidebar;