Web-Frontend/client/src/components/Header/Header.jsx

import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
import UserAvatarMenu from "./UserAvatarMenu.jsx";
import { useNavigate } from "react-router-dom";
import { NavLink } from "react-router-dom";

//TODO: Dynamically populate per each user
const user = {
  name: "venessa kuchenik",
  email: "vkuchenik@contractor.usgs.gov",
  // avatar: "src\\assets\\user_profile.svg"
}

export default function Header() {
  const navigate = useNavigate();
  const recipe = useRecipe({ key: "header" });
  const styles = recipe();

  return (
    <Flex css={styles}>
      <Button as={NavLink} to={"/home"} color="color" variant="plain" textStyle="5xl" fontWeight="bold">
        VDAP
      </Button>
      <Flex align="center" gap={3} pr={6}>
        <Stack gap="0" textAlign="center" cursor="default">
          <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
          <Text color="fg.muted" textStyle="sm">{user.email}</Text>
        </Stack>
        <UserAvatarMenu 
          name={user.name} 
          avatar={user.avatar} 
        />
      </Flex>
    </Flex>
  );
}