Refactor Header.jsx to place users name, email, and avatar in a group on the right side of the header

client/src/components/Header.jsx

@@ -1,4 +1,4 @@
-import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
+import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal, Flex } from "@chakra-ui/react"
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
@@ -7,10 +7,12 @@ export default function Header() {
   return (
     <chakra.div css={styles}>
       <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
-      <Stack gap="0">
+      <Flex align="center" gap={3} pr={6}>
+        <Stack gap="0" textAlign="right">
           <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
           <Text color="fg.muted" textStyle="sm">{user.email}</Text>
         </Stack>
+        
         {/* Add a drop down menu to the avatar */}
         <Menu.Root>
           <Menu.Trigger rounded="full" focusRing="outside">
@@ -30,6 +32,7 @@ export default function Header() {
           </Portal>
         </Menu.Root>
         {/* End drop down menu */}
+      </Flex>
     </chakra.div>
   );
 }