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" import Nav from "react-bootstrap/Nav"
export function Header ( props ) { 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> <Container>
<Navbar.Brand>App</Navbar.Brand> <Navbar.Brand>App</Navbar.Brand>
<Nav> <Nav>
<Nav.Link href="/">Home</Nav.Link> {Links}
<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>
</Nav> </Nav>
</Container> </Container>
</Navbar>) </Navbar>)