Scribd
Upload
15 views1 page

Navbar

The document contains a React component named Navbar that utilizes the NavLink component from react-router-dom for navigation. It dynamically renders navigation links based on the user's authentication status, allowing users to log in or log out. The navlinkStyles function customizes the appearance of the links based on whether they are active or not.

Uploaded by

KundiLokesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views1 page

Navbar

The document contains a React component named Navbar that utilizes the NavLink component from react-router-dom for navigation. It dynamically renders navigation links based on the user's authentication status, allowing users to log in or log out. The navlinkStyles function customizes the appearance of the links based on whether they are active or not.

Uploaded by

KundiLokesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

import React from "react";

import { NavLink } from "react-router-dom";


import { useAuth } from "./auth";

function Navbar() {
const { user, logout } = useAuth();

const navlinkStyles = ({ isActive }) => {


return {
textDecoration: isActive ? "none" : "underline",
fontWeight: isActive ? "bold" : "normal",
};
};

return (
<div>
<nav className="primary-nav">
<NavLink style={navlinkStyles} to="/">
Home
</NavLink>
<NavLink style={navlinkStyles} to="/about">
About
</NavLink>
<NavLink style={navlinkStyles} to="/contact">
Contact
</NavLink>
<NavLink style={navlinkStyles} to="/projects">
Projects
</NavLink>
<NavLink style={navlinkStyles} to="/users">
Users
</NavLink>
{user ? (
<NavLink style={navlinkStyles} to="/logout" onClick={logout}>
Logout
</NavLink>
) : (
<NavLink style={navlinkStyles} to="/login">
Login
</NavLink>
)}
</nav>
</div>
);
}

export default Navbar;

You might also like