diff --git a/ipi-survey-platform/src/components/layout/HeaderBar.jsx b/ipi-survey-platform/src/components/layout/HeaderBar.jsx index a3c9f3a..b58a62d 100644 --- a/ipi-survey-platform/src/components/layout/HeaderBar.jsx +++ b/ipi-survey-platform/src/components/layout/HeaderBar.jsx @@ -13,11 +13,26 @@ const overviewIconInactiveSrc = '/assets/images/mdi_file-find-outline-active.svg const HeaderBar = () => { const [open, setOpen] = React.useState(false); - const [userOpen, setUserOpen] = React.useState(false); const [userName, setUserName] = React.useState('User'); const [userEmail, setUserEmail] = React.useState(''); + const [userOpen, setUserOpen] = React.useState(false); + const profileRef = React.useRef(null); const navigate = useNavigate(); + // Close dropdown when clicking outside + React.useEffect(() => { + const handleClickOutside = (event) => { + if (profileRef.current && !profileRef.current.contains(event.target)) { + setUserOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + React.useEffect(() => { let parsed; try { @@ -127,32 +142,38 @@ const HeaderBar = () => { > )} */} -
{userName}
- {userEmail &&{userEmail}
} ++ {userName?.replace(/([a-z])([A-Z])/g, '$1 $2')} +
+ {userEmail &&{userEmail}
}Reason for rejection is required
)} -- Please refer to the screenshot -
+