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,37 +15,55 @@ 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 (
-    <>
-      <Toolbar
-        title={
-          <p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
-            Olá, <strong>{state.user.name}</strong> 👋
-          </p>
-        }
-        layoutType={layoutType}
-      />
-      <Container
-        maxWidth="false"
-        sx={layoutType === 'desktop' ? container : mobileContainer}
-      >
-        <MainMenu
-          options={menuOptions(state.pathname)}
+    state &&
+    state.user && (
+      <>
+        <Toolbar
+          title={
+            <p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
+              Olá, <strong>{state.user.name}</strong> 👋
+            </p>
+          }
           layoutType={layoutType}
+          avatarMenuOptions={avatarMenuOptions}
         />
-        <Routes>
-          <Route path="/home" element={<Home />} />
-          <Route path="/info" element={<Information />} />
-          <Route path="/calendar" element={<Calendar />} />
-          <Route path="/login" element={<Navigate to="/home" />} />
-        </Routes>
-      </Container>
-    </>
+        <Container
+          maxWidth="false"
+          sx={layoutType === 'desktop' ? container : mobileContainer}
+        >
+          <MainMenu
+            options={menuOptions(state.pathname)}
+            layoutType={layoutType}
+          />
+          <Routes>
+            <Route path="/home" element={<Home />} />
+            <Route path="/info" element={<Information />} />
+            <Route path="/calendar" element={<Calendar />} />
+            <Route path="/login" element={<Navigate to="/home" />} />
+          </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)}>
-                  <Typography textAlign="center">Meu perfil</Typography>
-                </MenuItem>
-                <MenuItem onClick={() => setAnchorElUser(null)}>
-                  <Typography textAlign="center">Sair</Typography>
-                </MenuItem>
+                {avatarMenuOptions.map(option => (
+                  <MenuItem key={option.text} onClick={option.action}>
+                    <Typography textAlign="center">{option.text}</Typography>
+                  </MenuItem>
+                ))}
               </Menu>
             </Box>
           </Box>
@@ -168,12 +165,11 @@ function Toolbar({ title, layoutType }) {
                 open={Boolean(anchorElUser)}
                 onClose={() => setAnchorElUser(null)}
               >
-                <MenuItem onClick={() => setAnchorElUser(null)}>
-                  <Typography textAlign="center">Meu perfil</Typography>
-                </MenuItem>
-                <MenuItem onClick={() => setAnchorElUser(null)}>
-                  <Typography textAlign="center">Sair</Typography>
-                </MenuItem>
+                {avatarMenuOptions.map(option => (
+                  <MenuItem key={option.text} onClick={option.action}>
+                    <Typography textAlign="center">{option.text}</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>
   );