Add archive banner to the top of the page
This commit is contained in:
parent
1fa790e080
commit
336de0534a
|
@ -59,6 +59,9 @@ export default function TopNavbar() {
|
|||
const [show, setShow] = useState(false);
|
||||
const handleShow = () => setShow(true);
|
||||
|
||||
// Used to display the archive banner
|
||||
const [isBannerHidden, setBannerHidden] = useState(false);
|
||||
|
||||
const { authUser } = useAuth();
|
||||
function profileSignIn() {
|
||||
if (authUser) {
|
||||
|
@ -68,37 +71,64 @@ export default function TopNavbar() {
|
|||
}
|
||||
|
||||
return (
|
||||
<Navbar className={styles.navbar} fixed="top" expand="sm" collapseOnSelect>
|
||||
<Container fluid>
|
||||
<Navbar.Brand className={styles.title} bsPrefix="no-styling">
|
||||
My Workout Buddy
|
||||
</Navbar.Brand>
|
||||
<>
|
||||
<div
|
||||
onClick={() => {
|
||||
setBannerHidden(true);
|
||||
}}
|
||||
hidden={isBannerHidden}
|
||||
onKeyDown={() => {
|
||||
setBannerHidden(true);
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
style={{
|
||||
backgroundColor: '#f87171',
|
||||
padding: '5px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<p style={{ margin: '5px' }}>
|
||||
This is the archived version. Click to remove banner
|
||||
</p>
|
||||
</div>
|
||||
<Navbar
|
||||
className={styles.navbar}
|
||||
sticky="top"
|
||||
expand="sm"
|
||||
collapseOnSelect
|
||||
>
|
||||
<Container fluid>
|
||||
<Navbar.Brand className={styles.title} bsPrefix="no-styling">
|
||||
My Workout Buddy
|
||||
</Navbar.Brand>
|
||||
|
||||
<Navbar.Toggle aria-controls="responsive-navbar" />
|
||||
<Navbar.Collapse id="responsive-navbar">
|
||||
<Nav className="me-auto">
|
||||
<Link legacyBehavior href="/exercises" passHref>
|
||||
<Nav.Link className={styles.item}>Exercises</Nav.Link>
|
||||
</Link>
|
||||
<Navbar.Toggle aria-controls="responsive-navbar" />
|
||||
<Navbar.Collapse id="responsive-navbar">
|
||||
<Nav className="me-auto">
|
||||
<Link legacyBehavior href="/exercises" passHref>
|
||||
<Nav.Link className={styles.item}>Exercises</Nav.Link>
|
||||
</Link>
|
||||
|
||||
<Link legacyBehavior href="/workouts" passHref>
|
||||
<Nav.Link className={styles.item}>Workouts</Nav.Link>
|
||||
</Link>
|
||||
</Nav>
|
||||
<Link legacyBehavior href="/workouts" passHref>
|
||||
<Nav.Link className={styles.item}>Workouts</Nav.Link>
|
||||
</Link>
|
||||
</Nav>
|
||||
|
||||
<Nav>
|
||||
<NewLink />
|
||||
<Nav.Link className={styles.item}>
|
||||
{authUser === null ? (
|
||||
<Nav onClick={handleShow}>Sign In</Nav>
|
||||
) : (
|
||||
<Nav onClick={handleShow}>Profile</Nav>
|
||||
)}
|
||||
{profileSignIn()}
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
<Nav>
|
||||
<NewLink />
|
||||
<Nav.Link className={styles.item}>
|
||||
{authUser === null ? (
|
||||
<Nav onClick={handleShow}>Sign In</Nav>
|
||||
) : (
|
||||
<Nav onClick={handleShow}>Profile</Nav>
|
||||
)}
|
||||
{profileSignIn()}
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue