From 2a0dd3952feba664eca04a415c87a849aaccd34d Mon Sep 17 00:00:00 2001
From: Elvin Cheng <elvincheng3@gmail.com>
Date: Wed, 6 Dec 2023 18:03:59 -0500
Subject: [PATCH] user menu

---
 apps/web/src/components/TopBar.tsx | 84 ++++++++++++++++++++++--------
 1 file changed, 61 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/components/TopBar.tsx b/apps/web/src/components/TopBar.tsx
index e92c3ed1..35b2e7c3 100644
--- a/apps/web/src/components/TopBar.tsx
+++ b/apps/web/src/components/TopBar.tsx
@@ -1,9 +1,21 @@
 import { MFALogoIcon, UserProfileAvatar } from 'apps/web/src/static/icons';
-import { Box, Hide, IconButton, Text, Flex, Spacer } from '@chakra-ui/react';
+import {
+  Box,
+  Hide,
+  IconButton,
+  Text,
+  Flex,
+  Spacer,
+  Button,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@chakra-ui/react';
 import { useAuth } from '@web/hooks/useAuth';
 
 export const TopBar: React.FC = () => {
-  const { user } = useAuth();
+  const { user, logout } = useAuth();
 
   return (
     <Flex
@@ -34,27 +46,53 @@ export const TopBar: React.FC = () => {
             Welcome back, {user?.firstName}!
           </Text>
         </Hide>
-        <IconButton
-          pl="12px"
-          pr="40px"
-          aria-label="Visit profile"
-          icon={
-            user?.firstName && user?.lastName ? (
-              <UserProfileAvatar
-                firstName={user.firstName}
-                lastName={user.lastName}
-                boxSize={7}
-              />
-            ) : (
-              <UserProfileAvatar
-                firstName="Default"
-                lastName="User"
-                boxSize={7}
-              />
-            )
-          }
-          colorScheme="none"
-        />
+        <Spacer w="12px" />
+        <Popover placement="bottom-end">
+          <PopoverTrigger>
+            <IconButton
+              aria-label="Visit profile"
+              icon={
+                user?.firstName && user?.lastName ? (
+                  <UserProfileAvatar
+                    firstName={user.firstName}
+                    lastName={user.lastName}
+                    boxSize={7}
+                  />
+                ) : (
+                  <UserProfileAvatar
+                    firstName="Default"
+                    lastName="User"
+                    boxSize={7}
+                  />
+                )
+              }
+              colorScheme="none"
+            />
+          </PopoverTrigger>
+          <PopoverContent maxW="150px">
+            <PopoverBody>
+              <Box>
+                <Text
+                  fontSize="17px"
+                  fontWeight="700"
+                  cursor="default"
+                  pb="10px"
+                >
+                  {user?.firstName + ' ' + user?.lastName}
+                </Text>
+                <Button
+                  borderRadius="8px"
+                  height="25px"
+                  cursor="default"
+                  onClick={logout}
+                >
+                  Logout
+                </Button>
+              </Box>
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
+        <Spacer w="40px" />
       </Flex>
     </Flex>
   );