chore: fix appBar

This commit is contained in:
Sabir Hassan 2024-02-29 12:05:05 +05:00
parent aa991be416
commit dc6f7f1a83
3 changed files with 79 additions and 110 deletions

2
.gitignore vendored
View File

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

View File

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

View File

@ -3,54 +3,32 @@
.AppBar { .AppBar {
background-color: $background-color !important; background-color: $background-color !important;
z-index: 1400 !important; z-index: 1400 !important;
height: 60px;
flex-direction: row !important;
align-items: center;
.AppBarIcon { .toolbar {
background-color: $btn-background-color !important; flex-grow: 1;
margin-right: 10px;
}
.logoWrapper {
display: flex; display: flex;
align-items: center; 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 { .logoWrapper {
margin-left: 20px; height: 50px;
width: 100px;
display: flex;
align-items: center;
cursor: pointer;
img { img {
max-height: 100%; max-height: 100%;
max-width: 150px; max-width: 150px;
} }
} }
}
.AppBarUnAuth { .rightSideBox {
height: 60px; flex-grow: 1;
cursor: pointer;
justify-content: space-between;
align-items: center;
display: flex; display: flex;
width: 100%; justify-content: flex-end;
.logoWrapper {
img {
max-height: 100%;
max-width: 120px;
}
}
.loginBtn {
margin-right: 16px;
}
} }
} }