chore: fix appBar
This commit is contained in:
parent
aa991be416
commit
dc6f7f1a83
2
.gitignore
vendored
2
.gitignore
vendored
@ -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
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user