49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import React, { useContext } from "react";
|
|
import { Nav, Container, Navbar } from "react-bootstrap";
|
|
import { Link } from "wouter";
|
|
import UserContext from "../contexts/UserContext";
|
|
|
|
const MyNavbar = () => {
|
|
const { currentUser } = useContext(UserContext);
|
|
|
|
const instructorLinks = [
|
|
{
|
|
label: "Manage Courses",
|
|
link: "/manage",
|
|
},
|
|
];
|
|
|
|
const MyLink = ({ children, ...rest }) => {
|
|
return (
|
|
<Nav.Link as={Link} {...rest}>
|
|
{children}
|
|
</Nav.Link>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Navbar variant="dark" bg="dark" expand="lg">
|
|
<Container>
|
|
<Navbar.Brand as={Link} href="/">
|
|
LearningTree
|
|
</Navbar.Brand>
|
|
<Navbar.Toggle aria-controls="navbar-nav" />
|
|
<Navbar.Collapse id="navbar-nav">
|
|
<Nav className="ms-auto">
|
|
<MyLink href="/">Home</MyLink>
|
|
{currentUser?.role === "instructor" &&
|
|
instructorLinks.map((item, k) => {
|
|
return <MyLink key={k} href={item.link}>{item.label}</MyLink>;
|
|
})}
|
|
{(currentUser?.id && <MyLink href="/logout">Logout</MyLink>) || (
|
|
<MyLink href="/login">Login</MyLink>
|
|
)}
|
|
</Nav>
|
|
</Navbar.Collapse>
|
|
</Container>
|
|
</Navbar>
|
|
);
|
|
};
|
|
|
|
export default MyNavbar;
|