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>
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index 25eff58..b5a2e77 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -125,8 +125,9 @@
"setting_dark_theme": "Dark theme",
"setting_language": "Language",
"setting_link_preview": "Show link previews",
- "settings_account": "Account settings",
- "settings_general": "General settings",
+ "settings_menu_item_account": "Account settings",
+ "settings_menu_item_contacts": "Contacts",
+ "settings_menu_item_general": "General settings",
"settings_title_chat": "Chat",
"settings_title_general": "General",
"settings_title_system": "System",
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index acc3752..d3a9883 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -125,8 +125,9 @@
"setting_dark_theme": "Thème sombre",
"setting_language": "Langue",
"setting_link_preview": "Montrer la prévisualisation des liens",
- "settings_account": "Paramètres du compte",
- "settings_general": "Paramètres généraux",
+ "settings_menu_item_account": "Paramètres du compte",
+ "settings_menu_item_contacts": "Contacts",
+ "settings_menu_item_general": "Paramètres généraux",
"settings_title_chat": "Clavardage",
"settings_title_general": "Général",
"settings_title_system": "Système",