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 dist-ssr
*.local *.local
.env
# Editor directories and files # Editor directories and files
.vscode/* .vscode/*
!.vscode/extensions.json !.vscode/extensions.json

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

@ -64,91 +64,80 @@ 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={ <img src={nostrichLogo} alt='Logo' onClick={() => navigate('/')} />
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>
)}
</Box> </Box>
{authState?.loggedIn && ( <Box className={styles.rightSideBox}>
<div {!isAuthenticated && (
style={{ <Button
display: 'flex', onClick={() => {
justifyContent: 'flex-end' navigate(appPublicRoutes.login)
}}
>
<Username
username={username}
avatarContent={userAvatar}
handleClick={handleOpenUserMenu}
/>
<Menu
id='menu-appbar'
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}} }}
keepMounted variant='contained'
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={!!anchorElUser}
onClose={handleCloseUserMenu}
> >
<MenuItem Sign in
sx={{ </Button>
justifyContent: 'center', )}
display: { md: 'none', paddingBottom: 0, marginBottom: -10 }
{isAuthenticated && (
<>
<Username
username={username}
avatarContent={userAvatar}
handleClick={handleOpenUserMenu}
/>
<Menu
id='menu-appbar'
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}} }}
> keepMounted
<Typography variant='h5'>{username}</Typography> transformOrigin={{
</MenuItem> vertical: 'top',
<Link horizontal: 'center'
to={appPublicRoutes.help} }}
target='_blank' open={!!anchorElUser}
style={{ color: 'inherit', textDecoration: 'inherit' }} onClose={handleCloseUserMenu}
> >
<MenuItem <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={{ sx={{
justifyContent: 'center', justifyContent: 'center',
borderTop: '0.5px solid var(--mui-palette-text-secondary)' borderTop: '0.5px solid var(--mui-palette-text-secondary)'
}} }}
> >
Help Logout
</MenuItem> </MenuItem>
</Link> </Menu>
<MenuItem </>
onClick={handleLogout} )}
sx={{ </Box>
justifyContent: 'center',
borderTop: '0.5px solid var(--mui-palette-text-secondary)'
}}
>
Logout
</MenuItem>
</Menu>
</div>
)}
</Toolbar> </Toolbar>
</AppBarMui> </AppBarMui>
) )

54
src/components/AppBar/style.module.scss
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; display: flex;
align-items: center;
} }
.logoWrapper { .logoWrapper {
display: flex; height: 50px;
align-items: center;
height: 100%;
padding: 13px 0 13px 0;
box-sizing: border-box;
}
.AppBarLogoWrapper {
height: 60px;
width: 100px; width: 100px;
cursor: pointer; display: flex;
justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
.logoWrapper { img {
margin-left: 20px; max-height: 100%;
max-width: 150px;
img {
max-height: 100%;
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;
}
} }
} }