Navbar links based on user role #42

Merged
juggy1233 merged 1 commits from #38-navbar-role-links into master 2023-04-13 15:03:49 -04:00
2 changed files with 15 additions and 1 deletions

View File

@@ -58,6 +58,7 @@ class User(UserMixin, db.Model):
"id": self.id,
"username": self.username,
"email": self.email,
"role": self.role
}
def from_dict(self, data, new_user=False) -> None:

View File

@@ -6,6 +6,13 @@ 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}>
@@ -17,11 +24,17 @@ const MyNavbar = () => {
return (
<Navbar variant="dark" bg="dark" expand="lg">
<Container>
<Navbar.Brand as={Link} href="/">LearningTree</Navbar.Brand>
<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) => {
return <MyLink href={item.link}>{item.label}</MyLink>;
})}
{(currentUser?.id && <MyLink href="/logout">Logout</MyLink>) || (
<MyLink href="/login">Login</MyLink>
)}