36 lines
984 B
JavaScript
36 lines
984 B
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 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?.id && <MyLink href="/logout">Logout</MyLink>) || (
|
|
<MyLink href="/login">Login</MyLink>
|
|
)}
|
|
</Nav>
|
|
</Navbar.Collapse>
|
|
</Container>
|
|
</Navbar>
|
|
);
|
|
};
|
|
|
|
export default MyNavbar;
|