roryhealy
/
workoutbuddy-archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Add archive banner to the top of the page' (#4) from new-firebase into main 

Reviewed-on: https://git.roryhealy.dev/roryhealy/workoutbuddy/pulls/4
This commit is contained in:
Rory Healy 2023-10-26 22:33:47 +11:00
parent 8c3351dfd9 336de0534a
commit e0ae9dd69e
1 changed files with 59 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/Navbar/Navbar.jsx
View File

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