Restructure file system to seperate Sidebar, Header, and Canvas components

2025-07-21 11:33:44 -07:00
parent a7bef5ddb3
commit 06edb481e9
12 changed files with 15 additions and 13 deletions
@@ -0,0 +1,28 @@
+import { chakra, useRecipe, Box, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import UserAvatarMenu from "./UserAvatarMenu.jsx";
+
+//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 recipe = useRecipe({ key: "header" });
+  const styles = recipe();
+
+  return (
+    <chakra.div css={styles}>
+      <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
+      <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>
+        <UserAvatarMenu name={user.name} avatar={user.avatar} />
+      </Flex>
+    </chakra.div>
+  );
+}
+
@@ -0,0 +1,30 @@
+import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
+
+ 
+export default function UserAvatarMenu({ name, avatar }) {
+    return (
+        <Menu.Root>
+            <Menu.Trigger focusRing="none">
+                <Box
+                    rounded="full" 
+                    tabIndex={0}
+                    _hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
+                >
+                    <Avatar.Root shape="full">
+                        <Avatar.Fallback name={name} />
+                        <Avatar.Image src={avatar} />
+                    </Avatar.Root>
+                </Box>
+            </Menu.Trigger>
+            <Portal>
+            <Menu.Positioner zIndex="popover">
+              <Menu.Content>
+                <Menu.Item value="account">Account</Menu.Item>
+                <Menu.Item value="settings">Settings</Menu.Item>
+                <Menu.Item value="logout">Logout</Menu.Item>
+              </Menu.Content>
+            </Menu.Positioner>
+          </Portal>
+        </Menu.Root>
+    );
+}