-
Notifications
You must be signed in to change notification settings - Fork 6
/
Navigation.js
85 lines (78 loc) · 3.26 KB
/
Navigation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from "react";
import { Link } from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { useLoginToken } from "../hooks/useAuth";
/**
* NavButton is a customized Button component designed to fit within the application's navigation bar. It applies specific styling to maintain visual consistency across all navigational buttons.
*
* @param {Object} props - Standard Button props with additional style overrides if needed.
* @returns {JSX.Element} A Button component styled for the application's navigation bar.
*/
function NavButton({ sx, ...props }) {
return (
<Button
{...props}
sx={{
...sx,
fontWeight: "bold",
}}
/>
);
}
/**
* NavItem is a wrapper around NavButton for creating navigational items that do not require routing functionality provided by React Router's Link component. It's primarily used for external links.
*
* @param {Object} props - Props to be passed to the NavButton component.
* @returns {JSX.Element} A navigational button for external links, styled consistently with the navigation bar.
*/
// I feel you should be able to do component={to ? Link : "a"}, but no...
// I suspect because of a bug in MUI
function NavItem({ ...props }) {
return <NavButton {...props} />;
}
/**
* NavLink extends NavButton to utilize React Router's Link component, enabling SPA-style routing without reloading the page. It's used for internal navigation within the application.
*
* @param {Object} props - Props including routing information to be passed to the NavButton component.
* @returns {JSX.Element} A navigational button for internal links, styled consistently with the navigation bar and incorporating SPA routing.
*/
function NavLink({ ...props }) {
return <NavButton {...props} component={Link} />;
}
/**
* Navigation provides the top-level navigation bar for the application. It includes links to the main sections of the site and adjusts its items based on the user's authentication status.
*
* This component integrates with the application's authentication context to conditionally render navigation links for authenticated and unauthenticated users, promoting a seamless user experience across different states of user session.
*
* @returns {JSX.Element} The top navigation bar of the application, including links to home, GitHub, login, and signup pages, as well as a logout option for authenticated users.
*/
function Navigation() {
const [token] = useLoginToken();
const isLoggedIn = token != null;
return (
<AppBar component="nav" elevation={0}>
<Toolbar>
<NavLink sx={{ marginRight: "auto" }} to="/">
<Typography component="span" variant="h3">
Ethical Assurance Platform
</Typography>
</NavLink>
<NavItem href="https://github.com/alan-turing-institute/AssurancePlatform">
Github
</NavItem>
{isLoggedIn ? (
<NavLink to="/logout">Logout</NavLink>
) : (
<>
<NavLink to="/">Login</NavLink>
<NavLink to="/signup">Signup</NavLink>
</>
)}
</Toolbar>
</AppBar>
);
}
export default Navigation;