Rename and Restructure

+ took out extra 'layout' directory. + 'Canvas' postfix removed from all files in the views directory. + "WidgetCanvas" renamed to "MyDashboard"
2025-08-05 12:57:18 -07:00
parent 03a335710f
commit ff95f2cbc0
27 changed files with 20 additions and 20 deletions
@@ -0,0 +1,32 @@
+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({ onChangeView }) {
+  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="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>
+  );
+}
+
@@ -0,0 +1,38 @@
+import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
+
+
+export default function UserAvatarMenu({ onChangeView, name, avatar }) {
+	return (
+		<Menu.Root>
+			<Menu.Trigger focusRing="none">
+				<Box
+						rounded="full" 
+						tabIndex={0}
+						_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
+						cursor="pointer"
+				>
+					<Avatar.Root shape="full">
+						<Avatar.Fallback name={name} />
+						<Avatar.Image src={avatar} />
+					</Avatar.Root>
+				</Box>
+			</Menu.Trigger>
+			<Portal>
+				{/* zIndex: overlay = 1300 */}
+				<Menu.Positioner zIndex="overlay"> 
+					<Menu.Content>
+						<Menu.Item value="account" onClick={() => onChangeView("account")}>
+							Account
+						</Menu.Item>
+						<Menu.Item value="settings" onClick={() => onChangeView("settings")}>
+							Settings
+						</Menu.Item>
+						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>
+							Logout
+						</Menu.Item>
+					</Menu.Content>
+				</Menu.Positioner>
+			</Portal>
+		</Menu.Root>
+		);
+}