improvement: Refactor Profile component menu structure and enhance signOut function

Author: jpcmf

src/components/Header/Profile.tsx

@@ -1,6 +1,17 @@
 import { useContext } from "react";
 import { RiLogoutCircleLine } from "react-icons/ri";
-import { Box, Flex, Text, Menu, Avatar, MenuList, MenuItem, MenuButton } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Text,
+  Menu,
+  Avatar,
+  MenuList,
+  MenuItem,
+  MenuButton,
+  MenuDivider,
+  MenuGroup
+} from "@chakra-ui/react";
 
 import { AuthContext } from "@/contexts/AuthContext";
 
@@ -27,18 +38,28 @@ export function Profile({ showProfileData = true }: ProfileProps) {
         </MenuButton>
 
         <MenuList bg="gray.900" borderColor="gray.800">
-          <MenuItem
-            icon={<RiLogoutCircleLine size={16} />}
-            onClick={signOut}
-            color="gray.600"
-            bg="gray.900"
-            _hover={{ color: "white" }}
-          >
-            Logout
-          </MenuItem>
-          <MenuItem color="gray.600" bg="gray.900" _hover={{ color: "white" }}>
-            {user?.about}
-          </MenuItem>
+          <MenuGroup title="Minha conta">
+            <MenuItem color="gray.600" bg="gray.900" _hover={{ color: "white" }}>
+              {user?.about}
+            </MenuItem>
+            {/* <MenuDivider /> */}
+            <MenuItem color="gray.600" bg="gray.900" _hover={{ color: "white" }}>
+              My Account
+            </MenuItem>
+            <MenuItem color="gray.600" bg="gray.900" _hover={{ color: "white" }}>
+              Payments{" "}
+            </MenuItem>
+            <MenuDivider />
+            <MenuItem
+              icon={<RiLogoutCircleLine size={16} />}
+              onClick={signOut}
+              color="gray.600"
+              bg="gray.900"
+              _hover={{ color: "white" }}
+            >
+              Logout
+            </MenuItem>
+          </MenuGroup>
         </MenuList>
       </Menu>
     </Flex>

src/contexts/AuthContext.tsx

@@ -59,9 +59,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }
 
   function signOut() {
+    setUser(null);
     destroyCookie(undefined, "nextauth.token");
     Router.push("/auth/signin");
-    setUser(null);
   }
 
   return <AuthContext.Provider value={{ user, isAuthenticated, signIn, signOut }}>{children}</AuthContext.Provider>;