chore: fix appBar

.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

src/components/AppBar/AppBar.tsx

@@ -64,18 +64,13 @@ export const AppBar = () => {
 
   return (
     <AppBarMui position='fixed' className={styles.AppBar}>
-      <Toolbar>
-        <Box
-          className={
-            isAuthenticated ? styles.AppBarLogoWrapper : styles.AppBarUnAuth
-          }
-        >
-          <div className={styles.logoWrapper}>
+      <Toolbar className={styles.toolbar}>
+        <Box className={styles.logoWrapper}>
           <img src={nostrichLogo} alt='Logo' onClick={() => navigate('/')} />
-          </div>
+        </Box>
 
+        <Box className={styles.rightSideBox}>
           {!isAuthenticated && (
-            <Box>
             <Button
               onClick={() => {
                 navigate(appPublicRoutes.login)
@@ -84,17 +79,10 @@ export const AppBar = () => {
             >
               Sign in
             </Button>
-            </Box>
           )}
-        </Box>
 
-        {authState?.loggedIn && (
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-end'
-            }}
-          >
+          {isAuthenticated && (
+            <>
               <Username
                 username={username}
                 avatarContent={userAvatar}
@@ -147,8 +135,9 @@ export const AppBar = () => {
                   Logout
                 </MenuItem>
               </Menu>
-          </div>
+            </>
           )}
+        </Box>
       </Toolbar>
     </AppBarMui>
   )

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;
-  }
-
-  .logoWrapper {
+  .toolbar {
+    flex-grow: 1;
     display: flex;
     align-items: center;
-    height: 100%;
-    padding: 13px 0 13px 0;
-    box-sizing: border-box;
   }
 
-  .AppBarLogoWrapper {
-    height: 60px;
-    width: 100px;
-    cursor: pointer;
-    justify-content: center;
-    align-items: center;
-
   .logoWrapper {
-      margin-left: 20px;
+    height: 50px;
+    width: 100px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 
     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;
   }
 }