feat: wrap recording & exit buttons inside user !null check

This commit is contained in:
karishmas6
2024-09-30 16:00:09 +05:30
parent dbbb88ab4f
commit 32de7bd4bb

View File

@@ -54,76 +54,78 @@ export const NavBar = ({ newRecording, recordingName, isRecording }: NavBarProps
return ( return (
<NavBarWrapper> <NavBarWrapper>
<div style={{ {
display: 'flex', user !== null ? (
justifyContent: 'flex-start', <>
}}> <div style={{
<RecordingIcon /> display: 'flex',
<div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div> justifyContent: 'flex-start',
</div> }}>
<div style={{ <RecordingIcon />
display: 'flex', <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
justifyContent: 'flex-end', </div>
}}> <div style={{
<IconButton display: 'flex',
aria-label="new" justifyContent: 'flex-end',
size={"small"} }}>
onClick={handleNewRecording} <IconButton
sx={{ aria-label="new"
width: isRecording ? '100px' : '130px', size={"small"}
borderRadius: '5px', onClick={handleNewRecording}
padding: '8px', sx={{
background: 'white', width: isRecording ? '100px' : '130px',
color: 'rgba(255,0,0,0.7)', borderRadius: '5px',
marginRight: '10px', padding: '8px',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif', background: 'white',
fontWeight: '500', color: 'rgba(255,0,0,0.7)',
fontSize: '0.875rem', marginRight: '10px',
lineHeight: '1.75', fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
letterSpacing: '0.02857em', fontWeight: '500',
'&:hover': { color: 'red', backgroundColor: 'white' } fontSize: '0.875rem',
} lineHeight: '1.75',
} letterSpacing: '0.02857em',
> '&:hover': { color: 'red', backgroundColor: 'white' }
<Circle sx={{ marginRight: '5px' }} /> {isRecording ? 'NEW' : 'RECORD'} }
</IconButton> }
{ >
recordingLength > 0 <Circle sx={{ marginRight: '5px' }} /> {isRecording ? 'NEW' : 'RECORD'}
? <SaveRecording fileName={recordingName} /> </IconButton>
: null {
} recordingLength > 0
{isRecording ? <Button sx={{ ? <SaveRecording fileName={recordingName} />
width: '100px', : null
background: '#fff', }
color: 'rgba(25, 118, 210, 0.7)', {isRecording ? <Button sx={{
padding: '9px', width: '100px',
marginRight: '19px', background: '#fff',
'&:hover': { color: 'rgba(25, 118, 210, 0.7)',
background: 'white', padding: '9px',
color: 'rgb(25, 118, 210)', marginRight: '19px',
} '&:hover': {
}} onClick={goToMainMenu}> background: 'white',
<MeetingRoomIcon sx={{ marginRight: '5px' }} /> color: 'rgb(25, 118, 210)',
exit</Button> }
: null} }} onClick={goToMainMenu}>
{ <MeetingRoomIcon sx={{ marginRight: '5px' }} />
user !== null ? ( exit</Button>
<Button sx={{ : null}
width: '100px', <Button sx={{
background: '#fff', width: '100px',
color: 'rgba(25, 118, 210, 0.7)', background: '#fff',
padding: '9px', color: 'rgba(25, 118, 210, 0.7)',
marginRight: '19px', padding: '9px',
'&:hover': { marginRight: '19px',
background: 'white', '&:hover': {
color: 'rgb(25, 118, 210)', background: 'white',
color: 'rgb(25, 118, 210)',
}
}} onClick={logout}>
<MeetingRoomIcon sx={{ marginRight: '5px' }} />
logout</Button>
</div>
</>
) : ""
} }
}} onClick={logout}>
<MeetingRoomIcon sx={{ marginRight: '5px' }} />
logout</Button>
) : ""
}
</div>
</NavBarWrapper> </NavBarWrapper>
); );