feat: add notice banner, header hiding, fix footer #212

Merged
enes merged 4 commits from 186-header-design into staging 2024-09-19 11:30:46 +00:00
2 changed files with 164 additions and 103 deletions
Showing only changes of commit 5f39b55f68 - Show all commits

View File

@ -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,9 +121,33 @@ 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 (
<>
{isAuthenticated && isBannerVisible && (
<div className={styles.banner}>
<Container>
<div className={styles.bannerInner}>
SIGit is currently Alpha software (available for internal
testing), use at your own risk!
<Button
aria-label={`close banner`}
variant="text"
onClick={handleBannerHide}
>
<FontAwesomeIcon icon={faClose} />
</Button>
</div>
</Container>
</div>
)}
<AppBarMui <AppBarMui
position="fixed" position={matches ? 'sticky' : 'static'}
className={styles.AppBar} className={styles.AppBar}
sx={{ sx={{
boxShadow: 'none' boxShadow: 'none'
@ -238,5 +265,6 @@ export const AppBar = () => {
</Toolbar> </Toolbar>
</Container> </Container>
</AppBarMui> </AppBarMui>
</>
) )
} }

View File

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