From 32de7bd4bb227d1d351261d36aa1f7ae228c6e61 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 30 Sep 2024 16:00:09 +0530
Subject: [PATCH] feat: wrap recording & exit buttons inside user !null check

---
 src/components/molecules/NavBar.tsx | 140 ++++++++++++++--------------
 1 file changed, 71 insertions(+), 69 deletions(-)

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