feat: show user email

src/components/molecules/NavBar.tsx

@@ -3,12 +3,11 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { IconButton } from "@mui/material";
-import { RecordingIcon } from "../atoms/RecorderIcon";
-import { SaveRecording } from "./SaveRecording";
-import { Logout, Clear } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem, Typography, Avatar } from "@mui/material";
+import { AccountCircle, Logout, Clear } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
+import { SaveRecording } from '../molecules/SaveRecording';
 
 interface NavBarProps {
   recordingName: string;
@@ -16,14 +15,20 @@ interface NavBarProps {
 }
 
 export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
-
   const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
-
-  console.log(`Recording URL: ${recordingUrl}`)
-
   const navigate = useNavigate();
+  
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
 
   const logout = async () => {
     dispatch({ type: 'LOGOUT' });
@@ -33,8 +38,6 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
     navigate('/login');
   };
 
-  // If recording is in progress, the resources and change page view by setting browserId to null
-  // else it won't affect the page
   const goToMainMenu = async () => {
     if (browserId) {
       await stopRecording(browserId);
@@ -50,63 +53,65 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
         display: 'flex',
         justifyContent: 'flex-start',
       }}>
-        <img src="../../../public/img/maxunlogo.png" width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 12px' }} />
+        <img src="../../../public/img/maxunlogo.png" width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
         <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
       </div>
       {
-        user !== null ? (
-          <>
-            <div style={{
-              display: 'flex',
-              justifyContent: 'flex-end',
-            }}>
-              {
-                !isRecording ? (
-                  <>
-                    <IconButton sx={{
-                      width: '140px',
-                      border: '1px solid #ff00c3',
-                      borderRadius: '5px',
-                      padding: '8px',
-                      background: 'white',
-                      color: '#ff00c3',
-                      marginRight: '10px',
-                      fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                      fontWeight: '500',
-                      fontSize: '0.875rem',
-                      lineHeight: '1.75',
-                      letterSpacing: '0.02857em',
-                      '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
-                    }} onClick={logout}>
-                      <Logout sx={{ marginRight: '5px' }} />
-                      Logout</IconButton>
-                  </>
-                ) :
-                  <>
-                    <IconButton sx={{
-                      width: '140px',
-                      borderRadius: '5px',
-                      padding: '8px',
-                      background: 'red',
-                      color: 'white',
-                      marginRight: '10px',
-                      fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                      fontWeight: '500',
-                      fontSize: '0.875rem',
-                      lineHeight: '1.75',
-                      letterSpacing: '0.02857em',
-                      '&:hover': { color: 'white', backgroundColor: 'red' }
-                    }} onClick={goToMainMenu}>
-                      <Clear sx={{ marginRight: '5px' }} />
-                      Discard</IconButton>
-                    <SaveRecording fileName={recordingName} />
-                  </>
-              }
-            </div>
-          </>
+        user ? (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+            {!isRecording ? (
+              <>
+                <IconButton onClick={handleMenuOpen} sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  border: '1px solid #ff00c3',
+                  borderRadius: '5px',
+                  padding: '8px',
+                  background: 'white',
+                  color: '#ff00c3',
+                  marginRight: '10px',
+                  '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
+                }}>
+                  <AccountCircle sx={{ marginRight: '5px' }} />
+                  <Typography variant="body1">{user.email}</Typography>
+                </IconButton>
+                <Menu
+                  anchorEl={anchorEl}
+                  open={Boolean(anchorEl)}
+                  onClose={handleMenuClose}
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                  }}
+                  transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                  }}
+                >
+                  <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
+                    <Logout sx={{ marginRight: '5px' }} /> Logout
+                  </MenuItem>
+                </Menu>
+              </>
+            ) : (
+              <>
+                <IconButton onClick={goToMainMenu} sx={{
+                  borderRadius: '5px',
+                  padding: '8px',
+                  background: 'red',
+                  color: 'white',
+                  marginRight: '10px',
+                  '&:hover': { color: 'white', backgroundColor: 'red' }
+                }}>
+                  <Clear sx={{ marginRight: '5px' }} />
+                  Discard
+                </IconButton>
+                <SaveRecording fileName={recordingName} />
+              </>
+            )}
+          </div>
         ) : ""
       }
-
     </NavBarWrapper>
   );
 };