From dc6f7f1a836744d964ffc2484324094d47b942d3 Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Thu, 29 Feb 2024 12:05:05 +0500
Subject: [PATCH] chore: fix appBar

---
 .gitignore                              |   2 +
 src/components/AppBar/AppBar.tsx        | 133 +++++++++++-------------
 src/components/AppBar/style.module.scss |  54 +++-------
 3 files changed, 79 insertions(+), 110 deletions(-)

diff --git a/.gitignore b/.gitignore
index a547bf3..d7de12f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 5e95007..8b1227a 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -64,91 +64,80 @@ export const AppBar = () => {
 
   return (
     <AppBarMui position='fixed' className={styles.AppBar}>
-      <Toolbar>
-        <Box
-          className={
-            isAuthenticated ? styles.AppBarLogoWrapper : styles.AppBarUnAuth
-          }
-        >
-          <div className={styles.logoWrapper}>
-            <img src={nostrichLogo} alt='Logo' onClick={() => navigate('/')} />
-          </div>
-
-          {!isAuthenticated && (
-            <Box>
-              <Button
-                onClick={() => {
-                  navigate(appPublicRoutes.login)
-                }}
-                variant='contained'
-              >
-                Sign in
-              </Button>
-            </Box>
-          )}
+      <Toolbar className={styles.toolbar}>
+        <Box className={styles.logoWrapper}>
+          <img src={nostrichLogo} alt='Logo' onClick={() => navigate('/')} />
         </Box>
 
-        {authState?.loggedIn && (
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-end'
-            }}
-          >
-            <Username
-              username={username}
-              avatarContent={userAvatar}
-              handleClick={handleOpenUserMenu}
-            />
-            <Menu
-              id='menu-appbar'
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'center'
+        <Box className={styles.rightSideBox}>
+          {!isAuthenticated && (
+            <Button
+              onClick={() => {
+                navigate(appPublicRoutes.login)
               }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'center'
-              }}
-              open={!!anchorElUser}
-              onClose={handleCloseUserMenu}
+              variant='contained'
             >
-              <MenuItem
-                sx={{
-                  justifyContent: 'center',
-                  display: { md: 'none', paddingBottom: 0, marginBottom: -10 }
+              Sign in
+            </Button>
+          )}
+
+          {isAuthenticated && (
+            <>
+              <Username
+                username={username}
+                avatarContent={userAvatar}
+                handleClick={handleOpenUserMenu}
+              />
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center'
                 }}
-              >
-                <Typography variant='h5'>{username}</Typography>
-              </MenuItem>
-              <Link
-                to={appPublicRoutes.help}
-                target='_blank'
-                style={{ color: 'inherit', textDecoration: 'inherit' }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center'
+                }}
+                open={!!anchorElUser}
+                onClose={handleCloseUserMenu}
               >
                 <MenuItem
+                  sx={{
+                    justifyContent: 'center',
+                    display: { md: 'none', paddingBottom: 0, marginBottom: -10 }
+                  }}
+                >
+                  <Typography variant='h5'>{username}</Typography>
+                </MenuItem>
+                <Link
+                  to={appPublicRoutes.help}
+                  target='_blank'
+                  style={{ color: 'inherit', textDecoration: 'inherit' }}
+                >
+                  <MenuItem
+                    sx={{
+                      justifyContent: 'center',
+                      borderTop: '0.5px solid var(--mui-palette-text-secondary)'
+                    }}
+                  >
+                    Help
+                  </MenuItem>
+                </Link>
+                <MenuItem
+                  onClick={handleLogout}
                   sx={{
                     justifyContent: 'center',
                     borderTop: '0.5px solid var(--mui-palette-text-secondary)'
                   }}
                 >
-                  Help
+                  Logout
                 </MenuItem>
-              </Link>
-              <MenuItem
-                onClick={handleLogout}
-                sx={{
-                  justifyContent: 'center',
-                  borderTop: '0.5px solid var(--mui-palette-text-secondary)'
-                }}
-              >
-                Logout
-              </MenuItem>
-            </Menu>
-          </div>
-        )}
+              </Menu>
+            </>
+          )}
+        </Box>
       </Toolbar>
     </AppBarMui>
   )
diff --git a/src/components/AppBar/style.module.scss b/src/components/AppBar/style.module.scss
index 7423310..09f35bd 100644
--- a/src/components/AppBar/style.module.scss
+++ b/src/components/AppBar/style.module.scss
@@ -3,54 +3,32 @@
 .AppBar {
   background-color: $background-color !important;
   z-index: 1400 !important;
+  height: 60px;
+  flex-direction: row !important;
+  align-items: center;
 
-  .AppBarIcon {
-    background-color: $btn-background-color !important;
-    margin-right: 10px;
+  .toolbar {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
   }
 
   .logoWrapper {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 13px 0 13px 0;
-    box-sizing: border-box;
-  }
-
-  .AppBarLogoWrapper {
-    height: 60px;
+    height: 50px;
     width: 100px;
-    cursor: pointer;
-    justify-content: center;
+    display: flex;
     align-items: center;
+    cursor: pointer;
 
-    .logoWrapper {
-      margin-left: 20px;
-
-      img {
-        max-height: 100%;
-        max-width: 150px;
-      }
+    img {
+      max-height: 100%;
+      max-width: 150px;
     }
   }
 
-  .AppBarUnAuth {
-    height: 60px;
-    cursor: pointer;
-    justify-content: space-between;
-    align-items: center;
+  .rightSideBox {
+    flex-grow: 1;
     display: flex;
-    width: 100%;
-
-    .logoWrapper {
-      img {
-        max-height: 100%;
-        max-width: 120px;
-      }
-    }
-
-    .loginBtn {
-      margin-right: 16px;
-    }
+    justify-content: flex-end;
   }
 }