feat: add notice banner, header hiding, fix footer #212
@ -36,6 +36,9 @@ import styles from './style.module.scss'
|
|||||||
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||||
import { Container } from '../Container'
|
import { Container } from '../Container'
|
||||||
import { ButtonIcon } from '../ButtonIcon'
|
import { ButtonIcon } from '../ButtonIcon'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faClose } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||||
|
|
||||||
const metadataController = MetadataController.getInstance()
|
const metadataController = MetadataController.getInstance()
|
||||||
|
|
||||||
@ -118,125 +121,150 @@ export const AppBar = () => {
|
|||||||
}
|
}
|
||||||
const isAuthenticated = authState?.loggedIn === true
|
const isAuthenticated = authState?.loggedIn === true
|
||||||
|
|
||||||
|
const matches = useMediaQuery('(max-width:767px)')
|
||||||
|
const [isBannerVisible, setIsBannerVisible] = useState(true)
|
||||||
|
const handleBannerHide = () => {
|
||||||
|
setIsBannerVisible(false)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppBarMui
|
<>
|
||||||
position="fixed"
|
{isAuthenticated && isBannerVisible && (
|
||||||
className={styles.AppBar}
|
<div className={styles.banner}>
|
||||||
sx={{
|
<Container>
|
||||||
boxShadow: 'none'
|
<div className={styles.bannerInner}>
|
||||||
}}
|
SIGit is currently Alpha software (available for internal
|
||||||
>
|
testing), use at your own risk!
|
||||||
<Container>
|
|
||||||
<Toolbar className={styles.toolbar} disableGutters={true}>
|
|
||||||
<Box className={styles.logoWrapper}>
|
|
||||||
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box className={styles.rightSideBox}>
|
|
||||||
{!isAuthenticated && (
|
|
||||||
<Button
|
<Button
|
||||||
startIcon={<ButtonIcon />}
|
aria-label={`close banner`}
|
||||||
onClick={() => {
|
variant="text"
|
||||||
navigate(appPublicRoutes.nostr)
|
onClick={handleBannerHide}
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
>
|
||||||
LOGIN
|
<FontAwesomeIcon icon={faClose} />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<AppBarMui
|
||||||
|
position={matches ? 'sticky' : 'static'}
|
||||||
|
className={styles.AppBar}
|
||||||
|
sx={{
|
||||||
|
boxShadow: 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Container>
|
||||||
|
<Toolbar className={styles.toolbar} disableGutters={true}>
|
||||||
|
<Box className={styles.logoWrapper}>
|
||||||
|
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
|
||||||
|
</Box>
|
||||||
|
|
||||||
{isAuthenticated && (
|
<Box className={styles.rightSideBox}>
|
||||||
<>
|
{!isAuthenticated && (
|
||||||
<Username
|
<Button
|
||||||
username={username}
|
startIcon={<ButtonIcon />}
|
||||||
avatarContent={userAvatar}
|
onClick={() => {
|
||||||
handleClick={handleOpenUserMenu}
|
navigate(appPublicRoutes.nostr)
|
||||||
/>
|
|
||||||
<Menu
|
|
||||||
id="menu-appbar"
|
|
||||||
anchorEl={anchorElUser}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'center'
|
|
||||||
}}
|
}}
|
||||||
keepMounted
|
variant="contained"
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'center'
|
|
||||||
}}
|
|
||||||
open={!!anchorElUser}
|
|
||||||
onClose={handleCloseUserMenu}
|
|
||||||
>
|
>
|
||||||
<MenuItem
|
LOGIN
|
||||||
sx={{
|
</Button>
|
||||||
justifyContent: 'center',
|
)}
|
||||||
display: { md: 'none' },
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '14px',
|
|
||||||
color: 'var(--text-color)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="h6">{username}</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={handleProfile}
|
|
||||||
sx={{
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Profile
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
setAnchorElUser(null)
|
|
||||||
|
|
||||||
navigate(appPrivateRoutes.settings)
|
{isAuthenticated && (
|
||||||
|
<>
|
||||||
|
<Username
|
||||||
|
username={username}
|
||||||
|
avatarContent={userAvatar}
|
||||||
|
handleClick={handleOpenUserMenu}
|
||||||
|
/>
|
||||||
|
<Menu
|
||||||
|
id="menu-appbar"
|
||||||
|
anchorEl={anchorElUser}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'bottom',
|
||||||
|
horizontal: 'center'
|
||||||
}}
|
}}
|
||||||
sx={{
|
keepMounted
|
||||||
justifyContent: 'center'
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'center'
|
||||||
}}
|
}}
|
||||||
>
|
open={!!anchorElUser}
|
||||||
Settings
|
onClose={handleCloseUserMenu}
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
setAnchorElUser(null)
|
|
||||||
|
|
||||||
navigate(appPublicRoutes.verify)
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Verify
|
|
||||||
</MenuItem>
|
|
||||||
<Link
|
|
||||||
to={appPublicRoutes.source}
|
|
||||||
target="_blank"
|
|
||||||
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
|
||||||
>
|
>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
|
sx={{
|
||||||
|
justifyContent: 'center',
|
||||||
|
display: { md: 'none' },
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: '14px',
|
||||||
|
color: 'var(--text-color)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6">{username}</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={handleProfile}
|
||||||
sx={{
|
sx={{
|
||||||
justifyContent: 'center'
|
justifyContent: 'center'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Source
|
Profile
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Link>
|
<MenuItem
|
||||||
<MenuItem
|
onClick={() => {
|
||||||
onClick={handleLogout}
|
setAnchorElUser(null)
|
||||||
sx={{
|
|
||||||
justifyContent: 'center'
|
navigate(appPrivateRoutes.settings)
|
||||||
}}
|
}}
|
||||||
>
|
sx={{
|
||||||
Logout
|
justifyContent: 'center'
|
||||||
</MenuItem>
|
}}
|
||||||
</Menu>
|
>
|
||||||
</>
|
Settings
|
||||||
)}
|
</MenuItem>
|
||||||
</Box>
|
<MenuItem
|
||||||
</Toolbar>
|
onClick={() => {
|
||||||
</Container>
|
setAnchorElUser(null)
|
||||||
</AppBarMui>
|
|
||||||
|
navigate(appPublicRoutes.verify)
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
justifyContent: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Verify
|
||||||
|
</MenuItem>
|
||||||
|
<Link
|
||||||
|
to={appPublicRoutes.source}
|
||||||
|
target="_blank"
|
||||||
|
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
||||||
|
>
|
||||||
|
<MenuItem
|
||||||
|
sx={{
|
||||||
|
justifyContent: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Source
|
||||||
|
</MenuItem>
|
||||||
|
</Link>
|
||||||
|
<MenuItem
|
||||||
|
onClick={handleLogout}
|
||||||
|
sx={{
|
||||||
|
justifyContent: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Toolbar>
|
||||||
|
</Container>
|
||||||
|
</AppBarMui>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -34,3 +34,36 @@
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: $primary-main;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerInner {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
padding-block: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 44px;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active,
|
||||||
|
&:focus-within {
|
||||||
|
background: $primary-main;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user