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,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>
+    );
+}