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

import { chakra, useRecipe, Box, Button, Stack, Text, Flex, Image } from "@chakra-ui/react"
import { useColorMode } from "@/components/ui/color-mode";
import UserAvatarMenu from "./UserAvatarMenu.jsx";

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

export default function Header({ onChangeView }) {
  const recipe = useRecipe({ key: "header" });
  const styles = recipe();
  const { colorMode } = useColorMode();

  const logoSource = 
    colorMode === "dark"
      ? "/images/NVIS_Logo_Black.png"
      : "/images/NVIS_Logo_transparent.png"

  return (
    <chakra.div css={styles}>
      <Button 
        onClick={() => onChangeView("mydashboard")} 
        // color="color" 
        variant="plain" 
        // textStyle="5xl" 
        // fontWeight="bold"
      >
          <Image src={ logoSource } alt="NVIS Logo" h="60px" />
      </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} 
          onChangeView={ onChangeView }
        />
      </Flex>
    </chakra.div>
  );
}