diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index aaabbd3..4176a42 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -36,6 +36,9 @@ import styles from './style.module.scss' import { setUserRobotImage } from '../../store/userRobotImage/action' import { Container } from '../Container' 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() @@ -118,125 +121,150 @@ export const AppBar = () => { } const isAuthenticated = authState?.loggedIn === true + const matches = useMediaQuery('(max-width:767px)') + const [isBannerVisible, setIsBannerVisible] = useState(true) + const handleBannerHide = () => { + setIsBannerVisible(false) + } + return ( - - - - - Logo navigate('/')} /> - - - - {!isAuthenticated && ( + <> + {isAuthenticated && isBannerVisible && ( +
+ +
+ SIGit is currently Alpha software (available for internal + testing), use at your own risk! - )} +
+
+
+ )} + + + + + Logo navigate('/')} /> + - {isAuthenticated && ( - <> - - + {!isAuthenticated && ( + + )} - navigate(appPrivateRoutes.settings) + {isAuthenticated && ( + <> + + - Settings - - { - setAnchorElUser(null) - - navigate(appPublicRoutes.verify) - }} - sx={{ - justifyContent: 'center' - }} - > - Verify - - + {username} + + - Source + Profile - - - Logout - - - - )} - - - - + { + setAnchorElUser(null) + + navigate(appPrivateRoutes.settings) + }} + sx={{ + justifyContent: 'center' + }} + > + Settings + + { + setAnchorElUser(null) + + navigate(appPublicRoutes.verify) + }} + sx={{ + justifyContent: 'center' + }} + > + Verify + + + + Source + + + + Logout + + + + )} +
+
+
+
+ ) } diff --git a/src/components/AppBar/style.module.scss b/src/components/AppBar/style.module.scss index 6b15c93..07cfe31 100644 --- a/src/components/AppBar/style.module.scss +++ b/src/components/AppBar/style.module.scss @@ -34,3 +34,36 @@ 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; + } + } +}