sigit/sigit.io
6
2
Fork 0
Code Issues 41 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

chore: fix appBar

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

133
src/components/AppBar/AppBar.tsx
View File

@ -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>
)

54
src/components/AppBar/style.module.scss
View File

@ -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;
}
}