chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-17 11:03:55 -07:00
parent 5c68b1c5c3
commit 7da843b573
1 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Header.jsx
+27 -24
View File
@@ -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() { export default function Header() {
const recipe = useRecipe({ key: "header" }); const recipe = useRecipe({ key: "header" });
@@ -7,29 +7,32 @@ export default function Header() {
return ( return (
<chakra.div css={styles}> <chakra.div css={styles}>
<Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button> <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
<Stack gap="0"> <Flex align="center" gap={3} pr={6}>
<Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text> <Stack gap="0" textAlign="right">
<Text color="fg.muted" textStyle="sm">{user.email}</Text> <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
</Stack> <Text color="fg.muted" textStyle="sm">{user.email}</Text>
{/* Add a drop down menu to the avatar */} </Stack>
<Menu.Root>
<Menu.Trigger rounded="full" focusRing="outside"> {/* Add a drop down menu to the avatar */}
<Avatar.Root> <Menu.Root>
<Avatar.Fallback name={user.name} /> <Menu.Trigger rounded="full" focusRing="outside">
<Avatar.Image src={user.avatar} /> <Avatar.Root>
</Avatar.Root> <Avatar.Fallback name={user.name} />
</Menu.Trigger> <Avatar.Image src={user.avatar} />
<Portal> </Avatar.Root>
<Menu.Positioner zIndex="popover"> </Menu.Trigger>
<Menu.Content> <Portal>
<Menu.Item value="account">Account</Menu.Item> <Menu.Positioner zIndex="popover">
<Menu.Item value="settings">Settings</Menu.Item> <Menu.Content>
<Menu.Item value="logout">Logout</Menu.Item> <Menu.Item value="account">Account</Menu.Item>
</Menu.Content> <Menu.Item value="settings">Settings</Menu.Item>
</Menu.Positioner> <Menu.Item value="logout">Logout</Menu.Item>
</Portal> </Menu.Content>
</Menu.Root> </Menu.Positioner>
{/* End drop down menu */} </Portal>
</Menu.Root>
{/* End drop down menu */}
</Flex>
</chakra.div> </chakra.div>
); );
} }