Various improvement on the code
1. close menu on clcking menu item
2. provide correct translations on the menu item text
Change-Id: Icaf4aa111b8a4d7d4fde105c8150841f2613c08e
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 64d4c12..4963309 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -15,6 +15,7 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
+
import { Box, Button, Menu, MenuItem } from '@mui/material';
import { MouseEvent, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -22,26 +23,34 @@
import { useAuthContext } from '../contexts/AuthProvider';
+type NavigateURL = '/' | '/contacts' | '/settings-account' | '/settings-general';
+
export default function Header() {
const { t } = useTranslation();
const { logout } = useAuthContext();
const navigate = useNavigate();
- const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
- const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
- const handleClose = () => setAnchorEl(null);
- const goToContacts = () => navigate(`/contacts`);
+ const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+ const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
+ const closeMenuAndNavigate = (navigateUrl?: NavigateURL) => {
+ setAnchorEl(null);
+ if (navigateUrl) {
+ navigate(navigateUrl);
+ }
+ };
return (
<Box>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
{t('Menu')}
</Button>
- <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
- <MenuItem onClick={goToContacts}>Contacts</MenuItem>
- <MenuItem onClick={() => navigate('/settings-account')}>{t('settings_account')}</MenuItem>
- <MenuItem onClick={() => navigate('/settings-general')}>{t('settings_general')}</MenuItem>
+ <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => closeMenuAndNavigate()}>
+ <MenuItem onClick={() => closeMenuAndNavigate(`/`)}>{t('conversations')}</MenuItem>
+ <MenuItem onClick={() => closeMenuAndNavigate(`/contacts`)}>{t('settings_menu_item_contacts')}</MenuItem>
+ <MenuItem onClick={() => closeMenuAndNavigate('/settings-account')}>{t('settings_menu_item_account')}</MenuItem>
+ <MenuItem onClick={() => closeMenuAndNavigate('/settings-general')}>{t('settings_menu_item_general')}</MenuItem>
<MenuItem onClick={logout}>{t('logout')}</MenuItem>
</Menu>
</Box>