Modify Navbar view for different users dpending on login

This commit is contained in:
Ray 2023-09-05 10:43:11 +00:00 committed by GitHub
parent f1e29a7ca4
commit 84f5672aca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions

View File

@ -3,15 +3,19 @@ import Navbar from "react-bootstrap/Navbar"
import Nav from "react-bootstrap/Nav"
export function Header ( props ) {
return ( <Navbar>
// props.items is the value of nav state in App.js
// create a collection of navigation items
const Links = props.items.map( (item, itemkey) => {
return (
<Nav.Link href={item.link} key={itemkey}> {item.label} </Nav.Link>
)
} )
return (
<Navbar>
<Container>
<Navbar.Brand>App</Navbar.Brand>
<Nav>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/contact">Contact</Nav.Link>
<Nav.Link href="/signup">Create Account</Nav.Link>
<Nav.Link href="/signin">Sign in</Nav.Link>
{Links}
</Nav>
</Container>
</Navbar>)