Connect the Profile page into the navigation #112

src/components/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import PublicRoute from './layout/PublicRoute';
 import PrivateRoute from './layout/PrivateRoute';
 import Layout from './layout/AppLayout';
+import Profile from './pages/Profile';
 import Account from './pages/Account';
 import AccountInformation from './pages/Account/Information';
 import AccountManagement from './pages/Account/Management';
@@ -18,6 +19,7 @@ const App = (): JSX.Element => (
           <Route path="sign-in" element={<SignIn />} />
         </Route>
         <Route element={<PrivateRoute />}>
+          <Route path="profile" element={<Profile />} />
           <Route path="account" element={<Account />}>
             <Route path="information" element={<AccountInformation />} />
             <Route path="security" element={<AccountSecurity />} />

src/components/layout/AppBar/AccountMenu/index.tsx

@@ -11,6 +11,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
 import Button from 'components/core/Button';
 import { useSelector, useDispatch } from 'hooks/redux';
 import { getIsAuthenticated, getUserProfilePhoto, getUserDisplayNameFirstCharacter, signOut } from 'store/auth';
@@ -29,6 +30,7 @@ const AccountMenu = (): JSX.Element => {
     setAnchorEl(event.currentTarget);
   }, []);
   const handleClose = useCallback(() => setAnchorEl(null), []);
+  const handleProfileClick = useCallback<() => void>(() => navigate('/profile'), [navigate]);
   const handleAccountClick = useCallback<() => void>(() => navigate('/account/information'), [navigate]);
   const handleSignOut = useCallback<() => void>(() => dispatch(signOut()), [dispatch]);
   const handleSignIn = useCallback<() => void>(() => navigate('/sign-in'), [navigate]);
@@ -89,10 +91,16 @@ const AccountMenu = (): JSX.Element => {
           dense: true,
         }}
       >
-        <MenuItem onClick={handleAccountClick}>
+        <MenuItem onClick={handleProfileClick}>
           <ListItemIcon>
             <AccountCircleOutlinedIcon fontSize="small" />
           </ListItemIcon>
+          <ListItemText primary={t('profile.title')} secondary={t('profile.description')} />
+        </MenuItem>
+        <MenuItem onClick={handleAccountClick}>
+          <ListItemIcon>
+            <ManageAccountsOutlinedIcon fontSize="small" />
+          </ListItemIcon>
           <ListItemText primary={t('account.title')} secondary={t('account.description')} />
         </MenuItem>
         <Divider />