Add action to avatar menu dropdown

src/AuthenticatedApp.js

@@ -1,4 +1,4 @@
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 import {
   CalendarMonth,
   CalendarMonthOutlined,
@@ -15,12 +15,28 @@ import { Container } from '@mui/system';
 import useLayoutType from './hooks/useLayoutType';
 import Toolbar from './components/Toolbar';
 import { useUser } from './context/user';
+import { useAuthState } from './context/auth';
 
 function AuthenticatedApp() {
+  const navigate = useNavigate();
   const { state } = useUser();
+  const { logout } = useAuthState();
   const layoutType = useLayoutType();
 
+  const avatarMenuOptions = [
+    {
+      text: 'Meu Perfil',
+      action: () => navigate('/profile', { replace: true }),
+    },
+    {
+      text: 'Sair',
+      action: logout,
+    },
+  ];
+
   return (
+    state &&
+    state.user && (
       <>
         <Toolbar
           title={
@@ -29,6 +45,7 @@ function AuthenticatedApp() {
             </p>
           }
           layoutType={layoutType}
+          avatarMenuOptions={avatarMenuOptions}
         />
         <Container
           maxWidth="false"
@@ -46,6 +63,7 @@ function AuthenticatedApp() {
           </Routes>
         </Container>
       </>
+    )
   );
 }
 

src/components/Toolbar.js

@@ -11,12 +11,10 @@ import {
 } from '@mui/material';
 import { useState } from 'react';
 
-function Toolbar({ title, layoutType }) {
+function Toolbar({ title, layoutType, avatarMenuOptions }) {
   const [anchorElUser, setAnchorElUser] = useState(null);
   const [anchorElNotifications, setAnchorElNotifications] = useState(null);
 
-  console.log(layoutType);
-
   switch (layoutType) {
     case 'desktop':
       return (
@@ -87,12 +85,11 @@ function Toolbar({ title, layoutType }) {
                 open={Boolean(anchorElUser)}
                 onClose={() => setAnchorElUser(null)}
               >
-                <MenuItem onClick={() => setAnchorElUser(null)}>
+                {avatarMenuOptions.map(option => (
-                  <Typography textAlign="center">Meu perfil</Typography>
+                  <MenuItem key={option.text} onClick={option.action}>
-                </MenuItem>
+                    <Typography textAlign="center">{option.text}</Typography>
-                <MenuItem onClick={() => setAnchorElUser(null)}>
-                  <Typography textAlign="center">Sair</Typography>
                   </MenuItem>
+                ))}
               </Menu>
             </Box>
           </Box>
@@ -168,12 +165,11 @@ function Toolbar({ title, layoutType }) {
                 open={Boolean(anchorElUser)}
                 onClose={() => setAnchorElUser(null)}
               >
-                <MenuItem onClick={() => setAnchorElUser(null)}>
+                {avatarMenuOptions.map(option => (
-                  <Typography textAlign="center">Meu perfil</Typography>
+                  <MenuItem key={option.text} onClick={option.action}>
-                </MenuItem>
+                    <Typography textAlign="center">{option.text}</Typography>
-                <MenuItem onClick={() => setAnchorElUser(null)}>
-                  <Typography textAlign="center">Sair</Typography>
                   </MenuItem>
+                ))}
               </Menu>
             </Box>
           </Box>

src/screens/Home/index.js

@@ -1,15 +1,12 @@
-import { useAuthState } from '../../context/auth';
 import { useUser } from '../../context/user';
 
 function Home() {
   const { isPending, classrooms } = useUser();
-  const { logout } = useAuthState();
 
   return (
     <div>
       <h2>Página inicial</h2>
       <button onClick={classrooms}>Get classrooms</button>
-      <button onClick={logout}>Logout</button>
       {isPending && <h1>Loading...</h1>}
     </div>
   );